angular - 如何为 Angular2 测试配置 webpack？

如何为 Angular2 测试配置 webpack？

我已经设置了基于 webpack 的配置来测试 Angular2 npm 包。
无论如何，我不断收到以下错误:



在我看来，我做的一切都是正确的，它应该可以工作。 html 和 scss 文件应该由 webpack 加载。

如果您想检查完整配置，我已将其上传到 GitHub 。您可以在那里找到 webpack.test.js 、 karma.conf.js 、 package.json 以及项目源代码。它很小 - 一个组件项目。

有关完整的错误消息，您可以转到 Travis CI

这是我的 webpack 配置:

var path = require('path');
var _root = path.resolve(__dirname, '..');

module.exports = {
    devtool: 'inline-source-map',

    resolve: {
        extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html']
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader']
            },
            {
                test: /\.html$/,
                loader: 'html'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'null'
            },
            {
                test: /\.json$/,
                loader: 'json'
            },
            {
                test: /\.css$/,
                exclude: root('src'),
                loader: 'null'
            },
            {
                test: /\.css$/,
                include: root('src'),
                loader: 'raw'
            },
            {
                test: /\.scss$/,
                exclude: root('src'),
                loader: 'null'
            },
            {
                test: /\.scss$/,
                include: root('src'),
                loader: 'raw!postcss!sass'
            }
        ]
    }
};

function root(args) {
    args = Array.prototype.slice.call(arguments, 0);
    return path.join.apply(path, [_root].concat(args));
}

最佳答案

问题出在 TypeScript 配置上。
tsconfig.json :

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "declaration": true,
    "outDir": "./lib",
    "noEmitHelpers": false,
    "isolatedModules": false
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "exclude": [
    "components.d.ts",
    "typings/browser.d.ts",
    "typings/browser",
    "node_modules",
    "examples"
  ]
}

"declaration": true 选项触发了类型 *.d.ts 文件的生成，这使得 IDE Intellisense 与 webpack 在测试期间抛出错误。

我通过在测试时注释掉这一行并在运行 build 时取消注释来解决这个问题。

关于angular - 如何为 Angular2 测试配置 webpack？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39827790/