Angular 2 纯 js 与 webpack / systemjs答案

【问题标题】：Angular 2 plain js vs webpack / systemjsAngular 2 纯 js 与 webpack / systemjs
【发布时间】：2016-06-20 08:52:55
【问题描述】：

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

我对 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 会解决所有依赖关系并将它们捆绑在一起。

任何想法为什么我会在使用普通 JS 时没有得到的 web pack 错误？

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

【问题讨论】：

我建议使用 cli.angular.io 来创建和更新您的 Angular 项目。
感谢您的建议，不幸的是，它使用 systemjs 并且不适用于提到的浏览器。
您使用的是什么版本的打字稿。你能粘贴你的 webpack 配置和 tsconfig 吗？
当然是一秒。
我一直在阅读有关 webpack 的更多信息，它似乎也使用了加载器。所以我认为这里的解决方案是使用browserfy之类的东西并将其编译成一个没有任何动态加载器的文件，除非webpack能够做到这一点？

标签： angular webpack opera

【解决方案1】：

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

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

我们对结果非常满意。

【讨论】：