javascript - 为什么我不能让这个应用程序使用 webpack 和很棒的 typescript 加载器将 typescript 文件编译成 javascript？

Question

我有一个 Angular 4 应用程序，我正在使用 webpack 和很棒的 Typescript 加载器将 Typescript 编译为 js 进行构建。当我在本地运行 npm run start 时，它可以工作，但是当我运行 npm run build 时，它不会将 typescript 文件编译为 js，并且出现以下错误:

ERROR in [at-loader] ./src/components/app.module.ts:21:39 
    TS2305: Module '"/Users/*******/Desktop/*****/src/services/index"' has no exported member 'ArticlesService'.

ERROR in [at-loader] ./src/components/app.module.ts:27:10 
    TS2305: Module '"/Users/********/Desktop/*********/src/services/index"' has no exported member 'StateService'.

ERROR in [at-loader] ./src/components/views/activities/activities.component.ts:22:11 
    TS6133: 'currViewName' is declared but its value is never read.

ERROR in [at-loader] ./src/components/views/articles/articles.component.ts:23:11 
    TS6133: 'currViewName' is declared but its value is never read.

ERROR in [at-loader] ./src/components/views/forgot-password/forgot-password.component.ts:229:15 
    TS6133: 'errorStr' is declared but its value is never read.

ERROR in [at-loader] ./src/components/views/infusion-manager/infusion-manager.component.ts:118:11 
    TS6133: 'currViewName' is declared but its value is never read.

ERROR in [at-loader] ./src/components/views/profile/profile.component.ts:3:40 
    TS2305: Module '"/Users/*********/Desktop/**********/src/services/index"' has no exported member 'StateService'.

ERROR in [at-loader] ./src/components/views/profile/profile.component.ts:149:27 
    TS2339: Property 'updateUserData' does not exist on type 'UserApiService'.

ERROR in [at-loader] ./src/components/views/registration/registration.component.ts:229:43 
    TS2339: Property 'PATIENT' does not exist on type 'typeof Constants'.

ERROR in [at-loader] ./src/components/views/registration/registration.component.ts:235:24 
    TS2339: Property 'PATIENT' does not exist on type 'typeof Constants'.

ERROR in [at-loader] ./src/components/views/registration/registration.component.ts:278:25 
    TS2365: Operator '===' cannot be applied to types 'number' and 'string'.

ERROR in [at-loader] ./src/services/state.service.ts:7:11 
    TS6133: 'currState' is declared but its value is never read.
Child html-webpack-plugin for "index.html":
       [0] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 1.54 kB {0} [built]
            factory:377ms building:9ms = 386ms
Child extract-text-webpack-plugin:
       [0] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
           [] -> factory:1ms building:11ms = 12ms
       [1] ./src/style/fonts/Roboto-Bold.ttf 46 bytes {0} [built]
           [] -> factory:14ms building:1ms = 15ms
       [2] ./src/style/fonts/Roboto-Light.ttf 47 bytes {0} [built]
           [] -> factory:15ms building:0ms = 15ms
       [3] ./src/style/fonts/Roboto-Medium.ttf 48 bytes {0} [built]
           [] -> factory:14ms building:1ms = 15ms
       [4] ./src/style/fonts/Roboto-Regular.ttf 49 bytes {0} [built]
           [] -> factory:14ms building:1ms = 15ms
       [5] ./src/style/fonts/Roboto-Thin.ttf 46 bytes {0} [built]
           [] -> factory:15ms building:0ms = 15ms
       [6] ./~/css-loader!./~/postcss-loader/lib!./~/sass-loader/lib/loader.js!./src/style/app.scss 23.9 kB {0} [built]
            factory:3ms building:72ms = 75ms
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! app@0.0.0 build: `rimraf dist && webpack --progress --profile --bail`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the app@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/*********/.npm/_logs/2018-10-04T15_40_20_857Z-debug.log

这是 typescript 的 webpack.config.js 文件:

var atlOptions = '';
 if (isTest && !isTestWatch) {
 // awesome-typescript-loader needs to output inlineSourceMap for code coverage to work with source maps.
     atlOptions = 'inlineSourceMap=true&sourceMap=false';
  }

config.module = {
  rules: [
    // Support for .ts files.
  {
     test: /\.ts$/,
     loaders: ['awesome-typescript-loader?' + atlOptions, 'angular2-template-loader', '@angularclass/hmr-loader'],
    exclude: [isTest ? /\.(e2e)\.ts$/ : /\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
  }

这来自 tsconfig.json 文件:

  {
     "compilerOptions": {
     "target": "ES5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "noEmitHelpers": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noStrictGenericChecks": true,
    "lib": ["es2015", "dom"]
  },
     "compileOnSave": false,
     "buildOnSave": false,
     "awesomeTypescriptLoaderOptions": {
     "forkChecker": true,
     "useWebpackText": true
  }
}

本项目使用的依赖项为node 8.10.0、npm 6.1.0、webpack 2.6.1、awesome-typescript-loader 3.1.3、typescript 2.6.1

我是不是遗漏了什么？

Answer 1

在本地 web-pack 中运行时，不检查所有可能的错误。如果发生错误，只需抛出异常(在开发环境中)。但是在构建它时，请检查运行时可能发生的所有错误。您必须解决这些问题才能构建并获得良好的构建文件。