Angular 2 plain js vs. webpack/systemjs

Question

우리는 Opera presto 플랫폼 (12.51)에서 Angular 2의 적합성을 테스트하고 있습니다.

저는 앵귤러 2와 웹팩을 처음 접했기 때문에 뭔가 명확하지 않았거나 제 이해/가정에 결함이 있습니다. 나는이 튜토리얼을 따라하면 내가 눈치 챘을

:

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

응용 프로그램을로드하고 제대로 실행됩니다.

하지만 튜토리얼의 타이프 버전을 사용하려고하면 : https://angular.io/docs/ts/latest/quickstart.html

응용 프로그램이 오류없이로드 실패합니다.

그래서 약간의 연구를했고 SystemJs가 브라우저 기능 밖에 있다고 결론을 내 렸습니다.

그 후 나는 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 

나의 이해는 웹 팩이 함께 모든 종속성을 해결하고 그들을 번들 것이라고했다.

웹 팩에 오류가 발생하여 일반 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 장치에서 더 나은 성능을 보였습니다.

이전 오페라 브라우저에 대한 앵글 드롭 지원과 함께 미래의 교정 시점에서 의미가 있습니다.

결과에 만족합니다.