Angular 2 纯 js 与 webpack / systemjs

Question

我们正在测试 Angular 2 在 Opera presto 平台 (12.51) 上的适用性。

我是 Angular 2 和 webpack 的新手，所以我很可能错过了一些明显的东西，或者我的理解/假设存在缺陷。

如果我按照本教程进行操作，我会注意到：

https://angular.io/docs/js/latest/quickstart.html

应用程序正确加载和运行。

但是如果我尝试使用本教程的 TypeScript 版本： https://angular.io/docs/ts/latest/quickstart.html

应用程序加载失败，没有任何错误。

所以我做了一些研究，得出的结论是 SystemJs 远远超出了浏览器的能力范围。

在那之后我想我会尝试 webpack。所以一切都通过很好的链接和打包文件发送到浏览器，并且没有任何动态模块加载。

但是webpack版本报错：

Uncaught exception: TypeError: Cannot convert 'core_1.ViewEncapsulation' to   object
  Error thrown at line 36, column 4 in <anonymous function>():
  ViewEncapsulationEnum.Emulated = ViewEncapsulationEnum.fromValue(core_1.ViewEncapsulation.Emulated);
called from line 30, column 0 in <anonymous function>():
var ViewEncapsulationEnum = (function () {
called from line 1371, column 1 in <anonymous function>(module, exports, __webpack_require__) in http://localhost:5000/vendor.js:
eval("\"use strict\";\nvar core_1 = __webpack_require__(79);\nvar core_private_1 = __webpack_require__(252);\nvar compile_metadata_1 = __webpack_require__(271);\nvar lang_1 = __webpack_require__(250);\nvar identifiers_1 = __webpack_require__(270);\nvar o = __webpack_require__(276);\nfunction _enumExpression(classIdentifier, value) {\n    if (lang_1.isBlank(value))\n        return o.NULL_EXPR;\n    var name = lang_1.resolveEnumToken(classIdentifier.runtime, value);\n    return o.importExpr(new compile_metadata_1.CompileIdentifierMetadata({\n        name: classIdentifier.name + \".\" + name,\n        moduleUrl: classIdentifier.moduleUrl,\n        runtime: value\n    }));\n}\nvar ViewTypeEnum = (function () {\n    function ViewTypeEnum() {\n    }\n    ViewTypeEnum.fromValue = function (value) {\n        return _enumExpression(identifiers_1.Identifiers.ViewType, value);\n    };\n    ViewTypeEnum.HOST = ViewTypeEnum.fromValue(core_private_1.ViewType.HOST);\n    ViewTypeEnum.COMPONENT = ViewTypeEnum.fromValue(core_private_1.ViewType.COMPONENT);\n    ViewTypeEnum.EMBEDDED = ViewTypeEnum.fromValue(core_private_1.ViewType.EMBEDDED);\n    return ViewTypeEnum;\n}());\nexports.ViewTypeEnum = ViewTypeEnum;\nvar

我的理解是 webpack 会将所有依赖项一起解析并将它们捆绑在一起。

知道为什么我会在 web pack 中得到一个错误，而我在普通 JS 中却没有得到吗？

webpack.common.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
  },

  resolve: {
    extensions: ['', '.js', '.ts']
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'ts'
      },
      {
        test: /\.html$/,
        loader: 'html'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw'
      }
    ]
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
};

webpack.dev.js

var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

module.exports = webpackMerge(commonConfig, {
  devtool: 'cheap-module-eval-source-map',

  output: {
    path: helpers.root('dist'),
    publicPath: 'http://localhost:5000/',
    filename: '[name].js',
    chunkFilename: '[id].chunk.js'
  },

  plugins: [
    new ExtractTextPlugin('[name].css')
  ],

  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
  }
}

typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#6.0.0+20160613154055"
  },
}

Answer 1

我们最终使用了 Backbone.js。它与 Presto 的兼容性要好得多，并且在低端 CPU 设备上表现更好。

此外，Angular 放弃对早期 Opera 浏览器的支持，从未来验证的角度来看，这是有意义的。

我们对结果非常满意。

Angular 2 纯 js 与 webpack / systemjs

Angular 2 plain js vs webpack / systemjs

angular

webpack

opera