带有babel-loader的Webpack不会发出有效的es5 [英] Webpack with babel-loader not emitting valid es5

问题描述

我有一个基于

I have a webpack config that is based off https://github.com/vuejs-templates/webpack-simple/blob/master/template/webpack.config.js It uses vue-loader and babel-loader. The issue is I cannot get it to generate ES5 code so that it will work in the most broad range of clients.

如果我使用ES2015预设，则webpack.optimize.UglifyJsPlugin无法缩小输出，因为Uglify只能处理ES5(不计算和声分支).错误类似于:Unexpected token: punc (()，并且出现在多个文件中.

If I use the ES2015 preset, webpack.optimize.UglifyJsPlugin fails to minify the output because Uglify can only handle ES5 (not counting the harmony branch). The errors are similar to: Unexpected token: punc (() and occur in multiple files.

我可以通过使用babili-webpack-plugin来解决此问题，该代码将减少ES6代码，但速度非常慢.但是，当我部署此代码时，我看到报告说Block-scoped declarations (let, const, function, class) not yet supported outside strict mode的错误，所以我知道他们是老客户，对ES6代码感到cho恼.

I can work around this by using babili-webpack-plugin which will minify the ES6 code but is very slow. However, when I deploy this code, I see errors being reported back saying Block-scoped declarations (let, const, function, class) not yet supported outside strict mode so I know they are older clients choking on ES6 code.

如何从 babel-loader 获得正确的ES5代码输出?我尝试了多个预设，无论是否使用transform-runtime插件.配置如下:

How can I get proper ES5 code output from babel-loader? I have tried multiple presets, with or without the transform-runtime plugin. Config below:

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(如果已检测到)和

vue-loader will process your js with babel-loader (if it's detected), and uses .babelrc by default.

在当前设置中，vue-loader使用的是不将任何选项传递给Babel(这意味着Babel对您的Vue文件不使用任何规则).

In your current setup you are not passing any options to Babel when it is used by vue-loader (meaning Babel uses no rules for your Vue files).

要么创建.babelrc，要么自己为.vue文件指定js加载器，以为其提供选项:

Either create .babelrc or specify the js loader by yourself for the .vue files to provide it with options:

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

Babel env 预设://babeljs.io/docs/plugins/preset-env/#optionstargets-uglify"rel =" nofollow noreferrer>具有uglify选项，该选项将完全编译为 ES5 .建议使用此预设，以使您的环境保持最新.

The env preset for Babel has an uglify option that will fully compile to ES5. This preset is recommended practice to keep your environment up to date.

// .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部分

Instead of using preset es2015 only, you might add es2016 and es2017, as well as stage-4, stage-3, etc. to assure all your code is transformed, and not just the ES2015 parts.

这篇关于带有babel-loader的Webpack不会发出有效的es5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！