您好我的源代码:
tsconfig.json
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true
},
"exclude": [
"node_modules",
"typings/browser",
"typings/main",
"typings/browser.d.ts"
]
}
的package.json
{
"name": "angular2-webpack",
"version": "1.0.0",
"description": "A webpack starter for Angular",
"scripts": {
"start": "webpack-dev-server --inline --hot --progress --port 8080",
"test": "karma start",
"build": "rimraf dist && webpack --config webpack.production.config.js --progress --profile --bail",
"postinstall": "typings install"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"core-js": "^2.4.1",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.23"
},
"devDependencies": {
"angular2-template-loader": "^0.4.0",
"awesome-typescript-loader": "^2.2.4",
"babel": "^6.5.2",
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.4",
"html-webpack-plugin": "^2.22.0",
"jasmine-core": "^2.4.1",
"jshint": "^2.9.3",
"jshint-loader": "^0.8.3",
"karma": "^1.2.0",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"node-libs-browser": "^1.0.0",
"null-loader": "^0.1.1",
"phantomjs-prebuilt": "^2.1.7",
"raw-loader": "^0.5.1",
"rimraf": "^2.5.2",
"style-loader": "^0.13.1",
"typescript": "^2.0.2",
"typings": "^1.3.2",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.14.0"
}
}
.babelrc
{
"presets": [
"es2015",
"stage-0",
"stage-1"
],
"plugins": ["transform-decorators-legacy" ]
}
webpack.base.config.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: [ 'babel-polyfill', './app/main.ts' ],
/*entry: {
'polyfill': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './app/main.ts'
},*/
resolve: {
extensions: ['', '.js', '.ts']
},
module: {
loaders: [
{
//test: /\.ts$/,
//loaders: ['awesome-typescript-loader', 'angular2-template-loader']
test: /\.ts$/,
loaders: ['babel-loader', 'ts-loader'],
exclude: /node_modules/,
},
{
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', 'polyfills']
}),
new HtmlWebpackPlugin({
template: 'index.html'
})
]
};
webpack.development.config.js
var webpack = require('webpack');
var helpers = require('./helpers');
var webpackMerge = require('webpack-merge');
var baseConfig = require('./webpack.base.config.js');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = webpackMerge( baseConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
path: helpers.root('dist'),
publicPath: 'http://localhost:8080/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
plugins: [
new ExtractTextPlugin('[name].css')
],
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
});
webpack.production.config.js
var webpack = require('webpack');
var helpers = require('./helpers');
var webpackMerge = require('webpack-merge');
var baseConfig = require('./webpack.base.config.js');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = webpackMerge( baseConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
path: helpers.root('dist'),
publicPath: 'http://localhost:8080/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
plugins: [
new ExtractTextPlugin('[name].css')
],
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
});
运行webpack --progress命令后,获取错误包:
ERROR in C:\Users\User\Desktop\ang_babel\node_modules\typescript\lib\lib.es6.d.ts
(5538,14): error TS2687: All declarations of '[Symbol.toStringTag]' must have identical modifiers.
ERROR in C:\Users\User\Desktop\ang_babel\node_modules\typescript\lib\lib.es6.d.ts
(5557,14): error TS2403: Subsequent variable declarations must have the same type. Variable '[Symbol.toStringTag]' must be of type 'string', but here has type '"Math"'.
ERROR in C:\Users\User\Desktop\ang_babel\node_modules\typescript\lib\lib.es6.d.ts
(5557,14): error TS2687: All declarations of '[Symbol.toStringTag]' must have identical modifiers.
ERROR in C:\Users\User\Desktop\ang_babel\typings\globals\core-js\index.d.ts
(3,14): error TS2300: Duplicate identifier 'PropertyKey'.
ERROR in C:\Users\User\Desktop\ang_babel\typings\globals\core-js\index.d.ts
(127,5): error TS2300: Duplicate identifier '[Symbol.unscopables]'.
Child html-webpack-plugin for "index.html":
+ 1 hidden modules
出了什么问题?
答案 0 :(得分:0)
经过长时间的研究后,我发现core-js打破了应用程序并导致错误。我卸载了core-js并且问题已经解决了。
<强>更新强>
Babel包含一个包含自定义再生器运行时的polyfill 和core-js。
这就是它发生的原因。你不需要包括
"core-js": "registry:dt/core-js#0.0.0+20160725163759"
使用babel时进入typings.json文件。