首页 > 解决方案 > babel transpile 到 es5 不适用于 node_modules

问题描述

我正在尝试在 ie11 中运行我当前的项目,但它SCRIPT1002: syntax error在foundation.js(它是谷歌材料设计类的一部分)中给了我一个错误说法。有问题的行是export default MDCFoundation. 现在从我有红色的问题来看,这是 es6 代码,ie11 只支持 es5。到目前为止,一切都很好。现在的问题是我似乎无法弄清楚如何告诉 babel 转换为 es5。我正在使用 webpack 和 babel,这是我的 webpack.config.js:

var path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var LiveReloadPlugin = require('webpack-livereload-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
  entry:{
    app: ['./src/app.js']
  },
  devtool: 'inline-source-map',
  externals: /^(tables.)/i,
  module: {
    rules: 
    [
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000'
      },
      {
        test: /\.(css)$/,
        use: [
          MiniCssExtractPlugin.loader, // <---- added here
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer()],
            }
          }
         ],
      },
      {
        test: /\.(scss)$/,
        use: [
          MiniCssExtractPlugin.loader, // <--- added here
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
                plugins: () => [autoprefixer()],
            },
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['./node_modules'],
            },
          }
        ],
      },
      {
        test: /\.js$/,
        include: /src/,
        loader: 'babel-loader',
        options: {
          "presets": [
            ["env", {
              "targets": {
                "browsers": ["ie >= 11"]
              }
            }]
          ]
        }
      }
    ],
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  },
  plugins: [
    new MiniCssExtractPlugin({filename: 'style.css'}),
    new LiveReloadPlugin({}),
    new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', jquery: 'jquery' })
  ],
  resolve: {
    extensions: ['.js']
  },

  watch: true,
  watchOptions: {
    aggregateTimeout: 300,
  },
  output: {
    publicPath: './dist',
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  }
};

如您所见,我已经在尝试告诉 babel 为 ie11 转换,但它仍然给我同样的错误。

标签: javascriptwebpackbabel-loader

解决方案


推荐阅读