Question

当我运行npm start（dev）Babel没问题时，我可以使用es6代码。但是当我尝试npm run-script build（prod）时，不使用babel和es6也不会被识别。这是我的package.json和webpack-production.config.js：

{
  "name": "public",
  "version": "1.0.0",
  "description": "",
  "main": "boot.js",
  "scripts": {
    "start": "webpack",
    "build": "webpack -p --config webpack-production.config.js",
    "dev": "webpack "
  },
  "author": "Adevcom",
  "license": "ISC",
  "devDependencies": {
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-stage-0": "^6.16.0",
    "babel-preset-stage-1": "^6.16.0",
    "babel-preset-stage-2": "^6.18.0",
    "babel-preset-stage-3": "^6.17.0",
    "webpack": "^1.13.3"
  },
  "dependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2016": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-runtime": "^6.18.0",
    "browserify": "^13.1.1",
    "envify": "^3.4.1",
    "fbjs": "^0.8.5",
    "flux": "^2.1.1",
    "highcharts": "^5.0.7",
    "ion-rangeslider": "^2.1.4",
    "keymirror": "^0.1.1",
    "object-assign": "^4.1.0",
    "react": "^15.3.2",
    "react-cookie": "^0.4.7",
    "react-dom": "^15.3.2",
    "react-dropzone": "^3.7.3",
    "react-dropzone-component": "^1.2.0",
    "react-gemini-scrollbar": "^2.1.5",
    "react-infinite": "^0.10.0",
    "react-maskedinput": "^3.2.0",
    "react-router": "^2.8.1",
    "reactify": "^1.1.1",
    "uglify-js": "^2.7.4",
    "watchify": "^3.7.0"
  },
  "browserify": {
    "transform": [
      "reactify",
      "envify"
    ]
  }
}

和

var webpack = require('webpack');
var path = require('path');
module.exports = {
    entry:['babel-polyfill',path.resolve(__dirname, "./boot.js") ] ,
    output: {
        path: __dirname,
        filename: "bundle.js"
    }, 
    plugins: [
        new webpack.DefinePlugin({
              'process.env':{
                'NODE_ENV': JSON.stringify('produccion'),
                'TEMPORAL_PARAM': JSON.stringify('AGREGA AQUI TUS PARAMETROS PRODUCCION')
              }
            }),
              new webpack.optimize.UglifyJsPlugin({minimize: true})
            ],
    externals: {
        // require("jquery") is external and available
        //  on the global var jQuery
        "jquery": "jQuery"
    },
    devtool: 'source-map',
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.join(__dirname, ''),

                exclude: /node_modules/,
                 query: {
                  presets: ['es2016', 'react']
                }
              }



        ]
    }
};

知道为什么会这样吗？谢谢你的建议。

嗯，这是espack工作的webpack.congi.js：

var webpack = require('webpack');
var path = require('path');
module.exports = {
    entry:[path.resolve(__dirname, "./boot.js") ] ,
    output: {
        path: __dirname,
        filename: "bundle.js"
    }, 
    plugins: [
        new webpack.DefinePlugin({
            'process.env':{
                'NODE_ENV': JSON.stringify('development'),
                'TEMPORAL_PARAM': JSON.stringify('AGREGA AQUI TUS PARAMETROS DESARROLLO'),
                'AAAAA': JSON.stringify('hola mundo desde webpack')
            }
        })
    ],
    watch:true,
    externals: {
        // require("jquery") is external and available
        //  on the global var jQuery
        "jquery": "jQuery"
    },
  //  devtool: 'source-map',
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.join(__dirname, ''),

                exclude: /node_modules/,
                query: {
                    presets: ['es2016', 'react']
                }
            }
        ]
    }
};

Answer 1

您的Babel配置需要从

更改

['es2016', 'react']

到

['es2015', 'es2016', 'react']

并使用

安装babel-preset-es2015

npm install --save-dev babel-preset-es2015

Uglify不支持ES6，因此您需要es2015将ES6编译为ES5。 es2016只编译ES2016中添加的新功能。

更新

现在，使用babel-preset-env是比使用基于年份的预设更好的选择。我建议你这样做：

presets: [
  ['env', {
    targets: {
      uglify: 2,
    }
  }],
]

编译所有现代JS功能，同时确保输出与Uglify 2.x兼容。

Answer 2

感谢loganfsmyth，以获得答案。

在我的情况下，我应该改变：

['stage-1', 'react']

到

['es2015', 'stage-1', 'react']

（对于使用第一阶段并且不明白这里发生了什么的人可能会有所帮助:)）

使用es6与webpack和babel

2 个答案:

更新