以下情况如何使用 babel-polyfill？答案

【问题标题】：How to use babel-polyfill in the following case?以下情况如何使用 babel-polyfill？
【发布时间】：2017-04-14 05:20:36
【问题描述】：

这是Vue Webpack template的原始代码：

entry: {
  app: './src/main.js'
},

这是我在网上找到的一个例子：

entry: [
  'babel-polyfill',
  './src/main.js'
],

但是，我收到此错误：

E:\alex\vue2-project-example\node_modules\webpack\lib\NormalModuleFactory.js:72
                        var elements = request.replace(/^-?!+/, "").replace(/!!+/g, "!").split("!");

编辑：这是整个文件（同样来自 Vue Webpack 官方模板存储库）：

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')

var env = process.env.NODE_ENV
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd

module.exports = {
  entry: [
    'babel-polyfill',
    app: './src/main.js'
  ],
  // entry: {
  //   app: './src/main.js'
  // },
  output: {
    path: config.build.assetsRoot,
    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
    filename: '[name].js'
  },
  resolve: {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'vue$': 'vue/dist/vue',
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components')
    }
  },
  resolveLoader: {
    fallback: [path.join(__dirname, '../node_modules')]
  },
  module: {
    preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      }
    ],
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  eslint: {
    formatter: require('eslint-friendly-formatter')
  },
  vue: {
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
    postcss: [
      require('autoprefixer')({
        browsers: ['last 2 versions']
      })
    ]
  }
}

【问题讨论】：

你做对了。问题出在其他地方，可能是您为某些文件声明加载器的方式。

标签： webpack vue.js babeljs polyfills

【解决方案1】：

尝试使用 babel-transform 运行时包：babel-plugin-transform-runtime

npm install --save-dev babel-plugin-transform-runtime

.bablerc 位于项目的根目录中

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"]
}

您现在可以重置您的 entry 参数：

entry: {
  app: './src/main.js'
},

【讨论】：