Vue.js 带有babel加载程序的网页包未发出有效es5

我有一个基于 它使用vue加载程序和babel加载程序。问题是我无法让它生成ES5代码，这样它就可以在最广泛的客户机中工作

如果我使用ES2015预设，

webpack.optimize.UglifyJsPlugin

无法缩小输出，因为Uglify只能处理ES5（不包括和声分支）。这些错误类似于：

意外标记：punc（（）

），发生在多个文件中

我可以通过使用

babili webpack plugin

来解决这个问题，该插件将缩小ES6代码，但速度非常慢。然而，当我部署此代码时，我看到返回的错误是

块范围声明（let、const、function、class）在严格模式之外还不支持

，所以我知道他们是被ES6代码阻塞的老客户

如何从babel loader获得正确的ES5代码输出？我已经尝试了多个预设，无论是否使用下面的

transform runtime

plugin.Config：

const webpack = require('webpack');
const globEntries = require('webpack-glob-entries');
const _ = require('lodash');
const path = require('path');
const BabiliPlugin = require("babili-webpack-plugin");

const env = process.env.NODE_ENV;

let entries;
if (env === 'production') {
  entries = globEntries('./src/**/vue/*.js');
} else {
  entries = _.mapValues(globEntries('./src/**/vue/*.js'), entry => [entry, 'webpack-hot-middleware/client?reload=true']);
}

module.exports = {
  entry: entries,
  output: {
    path: '/', ///no real path is required, just pass "/"
    publicPath: '/vue',
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            scss: 'vue-style-loader!css-loader!sass-loader',
            sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
          },
          // other vue-loader options go here
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          query: {
            presets: ['es2015'],
            plugins: ['transform-runtime'],
          },
        },
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]',
        },
      },
    ],
  },
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm.js',
    },
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(), // Enable HMR
    new webpack.NoEmitOnErrorsPlugin(),
  ],
  performance: {
    hints: false,
  },
  devtool: '#eval-source-map',
};

if (env === 'staging' || env === 'production') {
  //module.exports.devtool = env === 'staging' ? '#source-map' : false;
  module.exports.devtool = '#source-map';
  module.exports.output.path = path.resolve(__dirname, './src/v1/parse/cloud/public/vue');
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: `"${env}"`,
      },
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false,
      },
    }),
    // new BabiliPlugin(),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
    }),
  ]);
}

---

vue loader

将使用

babel loader

（如果检测到）处理您的

js

，并且

在当前设置中，当Babel被

vue loader

使用时，您不会将任何选项传递给Babel（这意味着Babel对您的vue文件不使用任何规则）

为

.vue

文件创建

.babelrc

或自己指定

js

加载程序，为其提供选项：

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      js: 'babel?presets[]=es2015' // Pass parameters as options
    }
  }
}

Babel的预设将完全编译为ES5。建议使用此预设以使您的环境保持最新

// .babelrc
{
  "presets": [
    [ "env", { "uglify": true } ],
    "stage-1" // Or other presets not included with 'env' preset.
  ],
  "plugins": ["transform-runtime"]
}

---

您可以添加

es2016

和

es2017

，以及

stage-4

、

stage-3

等，而不是仅使用预设的

es2015

，以确保您的所有代码都被转换，而不仅仅是es2015部分。

vue loader

将使用

babel loader

处理您的

js（如果检测到），以及

在当前设置中，当Babel被
vue loader
使用时，您不会将任何选项传递给Babel（这意味着Babel对您的vue文件不使用任何规则）

为
.vue
文件创建
.babelrc
或自己指定
js
加载程序，为其提供选项：

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      js: 'babel?presets[]=es2015' // Pass parameters as options
    }
  }
}

Babel的预设将完全编译为ES5。建议使用此预设以使您的环境保持最新

// .babelrc
{
  "presets": [
    [ "env", { "uglify": true } ],
    "stage-1" // Or other presets not included with 'env' preset.
  ],
  "plugins": ["transform-runtime"]
}

与只使用预设的
es2015
不同，您可以添加
es2016
和
es2017
，以及
stage-4
、
stage-3
等，以确保您的所有代码都被转换，而不仅仅是es2015部分。
这里的答案已经没有问题，但这里有一个不需要.babelrc文件的解决方案。这个答案适用于一个独立的webpack.config.js文件。我是通过查看laravel mix库的引擎盖下得到这个答案的

module: {
rules: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },
        {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders:{
                    js: {
                        loader: 'babel-loader',
                        options: {                
                                    cacheDirectory: true,
                                    presets: [
                                        ['env', {
                                            'modules': false,
                                            'targets': {
                                                'browsers': ['> 2%'],
                                                uglify: true
                                            }
                                        }]
                                    ],
                                    plugins: [
                                        'transform-object-rest-spread',
                                        ['transform-runtime', {
                                            'polyfill': false,
                                            'helpers': false
                                        }]
                                    ]
                                }
                        },
                    }
            }
        },
        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]'
            }
        }

    ]
},

我花了一天的大部分时间阅读所有这些无用的博客，忽略了babel loader必须连接到vue loader的核心概念。
这里的答案没有错，但这里有一个不需要.babelrc文件的解决方案。这个答案适用于独立的webpack.config.js文件。我是通过看看laravel mix库的引擎盖下面

module: {
rules: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },
        {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders:{
                    js: {
                        loader: 'babel-loader',
                        options: {                
                                    cacheDirectory: true,
                                    presets: [
                                        ['env', {
                                            'modules': false,
                                            'targets': {
                                                'browsers': ['> 2%'],
                                                uglify: true
                                            }
                                        }]
                                    ],
                                    plugins: [
                                        'transform-object-rest-spread',
                                        ['transform-runtime', {
                                            'polyfill': false,
                                            'helpers': false
                                        }]
                                    ]
                                }
                        },
                    }
            }
        },
        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]'
            }
        }

    ]
},

我花了一天的大部分时间阅读所有这些无用的博客，忽略了babel loader必须连接到vue loader的核心概念。
你能为你的配置提供一个最小的repo吗？@HerringtonDarkholme我可以用我的package.json和我的webpack.config.js提供一个repo，但超出这个范围的代码将很难实现。你在使用吗
.babelrc
文件？（
vue加载程序
将具有
babel加载程序
使用该文件。）您可能还希望使用
es2016
和
es2017
预设（或
env
）@bzeaman我目前没有使用
.babelrc
文件，但我已经尝试过了。我的理解是，任何可以在
中设置的东西。babelrc
都可以在
选项中设置：
。我最初使用的是
env
预设，但默认情况下它使用的是
最新的
，然后我仍然无法使用Uglify或部署到较旧的browsers.试图指定需要es2015的环境会让我回到原来的位置。@emkman我已经将我的评论放到了一个更广泛的答案中。您的回答是正确的，选项可以在没有
的情况下设置。babelrc
，但是您没有提供解析
时的选项。vue
文件，因为
vue loader
将使用
。babelrc
默认用于其Babel配置。您能为您的配置提供最低限度的repo吗？@HerringtonDarkholme我可以用我的package.json和我的webpack.config.js提供repo，但超出此范围的代码将非常困难。您是否使用
.babelrc
文件？（
vue加载程序
将具有
Babel加载程序
使用该文件。）您可能还希望使用
es2016
和
es2017
预设（或
env
）@bzeaman我目前没有使用
.babelrc
文件，但我已经尝试过了。我的理解是，任何可以在
中设置的东西。babelrc
都可以在
选项中设置：
。我最初使用的是
env
预设，但默认情况下它使用的是
最新的
，然后我仍然无法使用Uglify或部署到较旧的browsers.试图指定需要es2015的环境会让我回到原来的位置。@emkman我已经将我的评论放到了一个更广泛的答案中。您的回答是正确的，选项可以在没有
的情况下设置。babelrc
，但是您没有提供解析
时的选项。vue
文件，因为
vue loader
将使用
。babelrc
默认用于其Babel配置。你是对的，我缺少
。babelrc
是一个问题。我想我错误地认为
vue loader
的输出随后被传递到
babe