Question

我使用Webpack 2.x编译我的Angular 2 App。对于生产代码，我使用ngc和@ngtools/webpack的AotPlugin的组合进行编译。为了测试我使用awesome-typescript-loader。我的代码的生产版本工作得很好。但是，当我执行npm test时会发生一些非常奇怪的事情... awesome-typescript-loader抱怨它无法编译代码，但是Karma无论如何都会通过测试并且它们都会通过。

bash-3.2$ npm test
> btc2017@1.0.0 test /Users/tomb/Projects/brandontom.com/wp-content/themes/btc2017
> NODE_ENV=test node ./node_modules/.bin/karma start --single-run=true

webpack: wait until bundle finished:

[at-loader] Using typescript@2.2.1 from typescript and "tsconfig.json" from /Users/tomb/Projects/brandontom.com/wp-content/themes/b
tc2017/tsconfig.json.
[at-loader] Checking started in a separate process...
[at-loader] Ok, 1.054 sec.
ERROR in ./ngfactory/src/app/app.module.ngfactory.ts
Module parse failed: /Users/tomb/Projects/brandontom.com/wp-content/themes/btc2017/ngfactory/src/app/app.module.ngfactory.ts Unexpe
cted token (65:56)
You may need an appropriate loader to handle this file type.
| import * as import55 from '@angular/router/src/router_config_loader';
| import * as import56 from '@angular/router/src/router_state';
| class AppModuleInjector extends import0.NgModuleInjector<import1.AppModule> {
|   _CommonModule_0:import2.CommonModule;
|   _ApplicationModule_1:import3.ApplicationModule;
 @ ./bootstrap/main.aot.ts 1:0-78
webpack: Failed to compile.
Chrome 56.0.2924 (Mac OS X 10.12.3): Executed 4 of 4 SUCCESS (1.41 secs / 0.758 secs)

这是一个巧妙的技巧，但我宁愿首先尝试解析该文件，尤其是在生成该文件之后。

我的第一个想法是忽略生成文件的目录。它在一个名为ngfactory的文件夹中构建。以下是我已将以下规则添加到webpack.config.js的规则：

{
  test: /\.ts$/,
  loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
  exclude: [/(node_modules|bootstrap|prebuild|ngfactory)/]
}

但awesome-typescript-loader尽管exclude仍在尝试解析此文件。接下来我认为可能是Karma，因此我在我的karma.conf.js添加了排除规则。

module.exports = function (config) {
  var _config = {
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      { pattern: './karma-shim.js', watched: false }
    ],
    exclude: [
      'bootstrap',
      'dist',
      'ngfactory',     // <--- here's where that file lives
      'node_modules',
      'prebuild'
    ],
...
...

当我删除工件文件夹（prebuild和ngfactory）时，我意识到正在解析引导程序文件（位于名为bootstrap的目录中）并且该文件正在尝试导入app.module.ngfactory.ts我已将bootstrap添加到各种exclude属性（包括我的tsconfig.json）。但是，没有什么能阻止这个问题的产生。如果有人见过这样的话，我很想知道你是怎么解决这个问题的。

这是我的webpack.config.js：

var neat = require('node-neat')
var path = require('path')
var webpack = require('webpack')
var AotPlugin = require('@ngtools/webpack').AotPlugin

var sassPaths = neat.includePaths.map(function (path) {
  return 'includePaths[]=' + path
}).join('&')

module.exports = (function (nodeEnv) {
  var config = {
    entry: {
      globals: [ 'core-js/client/shim.min', 'reflect-metadata', 'zone.js' ],
      main: path.resolve(__dirname, 'bootstrap') + '/main.aot.ts'
    },
    devServer: {
      inline: true
    },
    module: {
      rules: [
        { test: /\.html$/, loader: 'raw-loader' },
        { test: /\.scss$/, loader: 'raw-loader!css-loader!sass-loader?' + sassPaths, exclude: /node_modules/ }
      ]
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, 'dist')
    },
    resolve: {
      extensions: ['.js', '.ts']
    },
    plugins: [
      new webpack.ContextReplacementPlugin(
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
        __dirname
      ),
      new webpack.DefinePlugin({
        process: { env: { NODE_ENV: JSON.stringify(nodeEnv) } }
      })
    ]
  }
  if (nodeEnv !== 'test') {
    config.module.rules.push({
      test: /\.ts$/,
      loader: '@ngtools/webpack'
    })
    config.plugins.push(new AotPlugin({
      tsConfigPath: './tsconfig.json'
    }))
    config.plugins.push(new webpack.optimize.UglifyJsPlugin({
      mangle: { screw_ie8: true, keep_fnames: true },
      compress: { screw_ie8: true, warnings: false },
      comments: false
    }))
  } else {
    config.module.rules.push({
      test: /\.ts$/,
      loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
      exclude: [/(node_modules|bootstrap|prebuild|ngfactory)/]
    })
  }
  return config
})(process.env.NODE_ENV)

这是我的tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "noEmitHelpers": false,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "outDir": "./prebuild",
    "lib": [
      "es2015",
      "dom"
    ],
    "types": [
      "jasmine",
      "node"
    ]
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true
  },
  "angularCompilerOptions": {
    "genDir": "./ngfactory",
    "entryModule": "src/app/app.module#AppModule"
  }
}

为了更好的衡量，我的karma.conf.js也在这里：

var webpackConfig = require('./webpack.config')

module.exports = function (config) {
  var _config = {
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      { pattern: './karma-shim.js', watched: false }
    ],
    exclude: [
      'bootstrap',
      'dist',
      'ngfactory',
      'node_modules',
      'prebuild'
    ],
    preprocessors: {
      './karma-shim.js': ['webpack']
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      stats: 'errors-only'
    },
    webpackServer: {
      noInfo: true
    },
    progress: ['progress'],
    port: 9876,
    color: true,
    logLevel: config.LOG_ERROR,
    browsers: ['Chrome']
  }
  config.set(_config)
}

Answer 1

虽然我无法阻止awesome-typescript-loader编译工件，但我能够让它在任何时候停止失败。加载器有一个名为transpileOnly的布尔设置。将其设置为true会阻止加载程序进行类型检查。我已将其添加到tsconfig.json部分的awesomeTypescriptLoaderOptions。

这不是理想的，但我可以（暂时）awesome-typescript-loader在测试方面没有强制执行类型检查...我猜...只要{{1确实在生产代码上强制执行它。

这是我的ngc

tsconfig.json

Webpack / Karma / awesome-typescript-loader不会忽略文件

1 个答案: