将 es6 与 webpack 和 babel 一起使用答案

【问题标题】：using es6 with webpack and babel将 es6 与 webpack 和 babel 一起使用
【发布时间】：2017-02-06 17:10:48
【问题描述】：

当我运行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']
                }
              }



        ]
    }
};

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

嗯，这是 es6 工作的 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']
                }
            }
        ]
    }
};

【问题讨论】：

“不使用 babel 和 es6 无法识别”是什么意思？您还没有告诉我们您看到的实际问题是什么。
我之前提过这个问题：stackoverflow.com/questions/42071529/…我不知道发生了什么，现在我看到问题是丑化了es6代码，根据这个：github.com/webpack/webpack/issues/2972我不知道当我尝试使用 prod 环境时，为什么使用 es6 的 webpack 会出现问题。在开发环境中没有问题（因为没有被丑化）

标签： webpack ecmascript-6 babeljs

【解决方案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 兼容。

【讨论】：

非常感谢，我想知道这样的事情，但不太确定该怎么做。稍后我会检查它，并确保我会将这个答案作为正确的答案。

【解决方案2】：

感谢 loganfsmyth 的回答。

就我而言，我应该改变：

['stage-1', 'react']

到

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

（可能对使用第一阶段但不了解这里发生了什么的人有所帮助:)）

【讨论】：