通向es5的babel转换不适用于node_modules

时间:2018-08-27 12:59:36

标签: javascript webpack babel-loader

我正在尝试在ie11中运行我当前的项目,但是在foundation.js(它属于Google的材料设计类的一部分)中,我说了一个错误SCRIPT1002: syntax error。有问题的行是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进行转换,但是它仍然给我同样的错误。

0 个答案:

没有答案