带有 Angular2 和 Webpack 错误的 VS2015 MVC 项目

Question

我用 Angular2 和 Webpack 在 VS2015 MVC 项目中创建了一个。 我正在努力完成 3 件事。

1. 将所有js打包成3个文件（app.bundle.js、polyfills.bundle.js、vendor.bundle.js）

2. 将组件templateUrl中的所有html模板嵌入到app.bundle.js文件中。

3. 缩小 js 文件会很棒。我还没到这一步。

我收到以下错误，app.bundle.js 和 vendor.bundle.js 只是 1K 文件 错误

构建：找不到模块“量角器”。 e2e\app.e2e-spec.ts 构建：重复标识符“PropertyKey”。 node_modules\@types\core-js\index.d.ts 21
构建：重复标识符'export ='。 node_modules\@types\core-js\index.d.ts 1513

我的完整项目在这里 https://github.com/cjohnst/Angular2MVC2015

package.json

{
  "name": "Angular2MVC2015",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "start": "tsc && npm install && npm run build && \"dotnet run\" ",
    "startWebpackDevServer": "webpack-dev-server --inline --progress --port 8080",
    "build": "SET NODE_ENV=development && webpack -d --color && dotnet run",
    "buildProduction": "SET NODE_ENV=production && webpack -d --color",
    "lint": "tslint ./Angular2/**/*.ts -t verbose",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "keywords": [],
  "dependencies": {
    "@angular/common": "~2.2.0",
    "@angular/compiler": "~2.2.0",
    "@angular/core": "~2.2.0",
    "@angular/forms": "~2.2.0",
    "@angular/http": "~2.2.0",
    "@angular/platform-browser": "~2.2.0",
    "@angular/platform-browser-dynamic": "~2.2.0",
    "@angular/router": "~3.2.0",
    "@angular/upgrade": "~2.2.0",
    "angular-in-memory-web-api": "~0.1.15",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25",
    "bootstrap": "^3.3.7",
    "angular2-toaster": "^1.0.1",
    "jquery": "2.2.4",
    "ng2-slim-loading-bar": "^2.0.4"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "@types/jasmine": "^2.5.35",
    "angular2-template-loader": "^0.4.0",
    "awesome-typescript-loader": "^2.2.4",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.15.0",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.0",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.7",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "typescript": "^2.0.3",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.14.0",
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typings": "^1.4.0",
    "tslint": "^3.7.4",
    "lodash": "^4.11.1",
    "ts-loader": "^0.8.1",
    "webpack-stream": "^3.2.0",
    "clean-webpack-plugin": "0.1.10",
    "sass-loader": "^3.1.2",
    "node-sass": "3.8.0"
  }
}

webpack.config.js

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        "polyfills": "./Angular2/polyfills.browser.ts",
        "vendor": "./Angular2/vendor.browser.ts",
        "app": "./Angular2/main.ts"
    },
    resolve: {
        extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html']
    },
    output: {
        path: "./wwwroot",
        filename: "[name].bundle.js"
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader']
            },
            {
                test: /\.html$/,
                loader: "html"
            },
            {
                test: /\.(png|jpg|gif|ico|woff|woff2|ttf|svg|eot)$/,
                loader: "file?name=assets/[name].[ext]",
            },

            // Load css files which are required in vendor.ts
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style', 'css')
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("css/[name].bundle.css"),
        new webpack.optimize.CommonsChunkPlugin({
            name: ["app", "vendor", "polyfills"]
        }),
        new CleanWebpackPlugin(
            [
                "./wwwroot"
            ]
        ),
  

        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ],
    devServer: {
        historyApiFallback: true,
        stats: "minimal"
    }
};

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "./node_modules/@types/"
    ]
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules/*",
    "**/*-aot.ts"
  ]
}

感谢您的帮助

Answer 1

我认为您收到错误 Cannot find module 'protractor' 是因为您在为生产生成构建时没有排除您的 spec 和 e2e 测试用例文件，因此您需要将 awesome-typescript-loader 文件中的 awesome-typescript-loader 配置更改为下面：

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

要缩小 js 文件，您可以使用 webpack 的UglifyJsPlugin 插件，如下所示：

const UglifyJsPlugin =  require('webpack/lib/optimize/UglifyJsPlugin');

plugins: [
  new UglifyJsPlugin({
    beautify: false, //prod
    mangle  : {
      screw_ie8: true,
      keep_fnames: true
    },
    compress: { screw_ie8: true },
    comments: false
  });
]