Question

我们正在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。因此，所有内容都通过精美的链接和打包文件提供给浏览器，并且没有任何动态模块加载。

但Web包版本会抛出错误：

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

我的理解是，Web包将解决所有依赖关系并将它们捆绑起来。

为什么我会因为简单的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设备上表现更好。

此外，对于早期的Opera浏览器的Angular drop支持，从未来的校对角度来看，它才有意义。

我们对结果非常满意。

Angular 2 plain js vs webpack / systemjs

1 个答案: