qbo*_*olt 7 javascript typescript webpack angular
我试图将 Angular2 快速入门代码合并到我当前的 webpack 构建中，似乎有些东西正在覆盖引发zone.js此错误的承诺。根据我见过的大多数 stackoverflow 帖子，该zone.js文件需要在任何可能包含承诺的文件之后加载。
我假设正在发生的事情是在 webpack 加载其余文件之前加载了<src>带有zone.js文件标签的 html node_module。
有什么想法或建议吗？
这是package.json我正在使用的。
{
"name": "site-pinger",
"version": "1.0.0",
"description": "",
"scripts": {
"build:watch": "webpack --colors --progress --watch",
"build": "webpack --colors --progress",
"start": "webpack-dev-server --progress --colors --hot --inline --port 3000"
},
"author": "",
"license": "ISC",
"standard": {
"parser": "babel-eslint"
},
"babel": {
"presets": [
"latest",
"stage-0"
]
},
"devDependencies": {
"@types/jasmine": "2.5.36",
"@types/node": "^6.0.46",
"babel-core": "^6.17.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.2.5",
"babel-polyfill": "^6.16.0",
"babel-preset-latest": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"canonical-path": "0.0.2",
"concurrently": "^3.2.0",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.9.0",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"jasmine-core": "~2.4.1",
"json-loader": "^0.5.4",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"lodash": "^4.16.4",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"standard": "^8.4.0",
"style-loader": "^0.13.2",
"ts-loader": "^2.0.1",
"tslint": "^3.15.1",
"typescript": "~2.0.10",
"url-loader": "^0.5.8",
"webpack": "^2.1.0",
"webpack-dev-server": "^2.4.1"
},
"dependencies": {
"@angular/common": "~2.4.0",
"@angular/compiler": "~2.4.0",
"@angular/core": "~2.4.0",
"@angular/forms": "~2.4.0",
"@angular/http": "~2.4.0",
"@angular/platform-browser": "~2.4.0",
"@angular/platform-browser-dynamic": "~2.4.0",
"@angular/router": "~3.4.0",
"angular-in-memory-web-api": "~0.2.4",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"zone.js": "^0.7.4"
},
"repository": {}
}
这是webpack.config.js文件
'use strict'
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const devtool = 'source-map'
const devServer = {
historyApiFallback: true
}
const entry = {
main: [
'babel-polyfill',
'./src/main'
],
}
const output = {
filename: '[name].js',
path: __dirname + '/dist',
publicPath: '/'
}
const extensions = [
'.js',
'.ts',
'.css',
'.html'
]
const modules = [
'node_modules',
'lib'
]
const rules = [{
test: /.ts$/,
exclude: /node_modules/,
loaders: ['ts-loader']
}, {
test: /.js$/,
exclude: /node_modules/,
loaders: ['babel-loader']
}, {
test: /.css$/,
loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
}, {
test: /.html$/,
exclude: /node_modules/,
include: /static/,
loader: 'html-loader'
}, {
test: /.(ico|png|eot|svg|ttf|woff|woff2)$/,
loader: 'url?limit=10000'
}]
const plugins = [
new ExtractTextPlugin('[name].css'),
new HtmlWebpackPlugin({
hash: true,
inject: 'head',
template: 'static/index.html'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity
})
]
module.exports = {
devtool,
devServer,
entry,
output,
resolve: {
extensions,
modules
},
module: {
rules
},
plugins
}
这是我的 index.html，我手动包含了该zone.js文件以确保他们的 Promise 不会被覆盖。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Site Pinger</title>
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="../src/systemjs.config.js"></script>
</head>
<body>
<app>Loading AppComponent content here ...</app>
</body>
</html>
我在加载core-js和zone.js. 对我来说，诀窍是将导入放在zone.js之后core-js。
改变了这一点：
import 'zone.js/dist/zone';
import 'core-js';
对此：
import 'core-js';
import 'zone.js/dist/zone';
回到你的 webpack 问题，正如@estus 所说，没有必要将systemjs导入放在那里，因为它将包含在你dist/*的 webpack 生成的文件中（在你的 index.html 中丢失）。
“webpacking”后我的 index.html 我的项目看起来像：
<html>
<head>
<!-- only some css links here -->
</head>
<body>
<my-app>
</my-app>
<script src="dist/vendor.bundle.min.js"></script>
<script src="dist/app.bundle.min.js"></script>
</body>
</html>
希望能帮助到你。
| 归档时间： |
|
| 查看次数： |
14338 次 |
| 最近记录： |