SCRIPT1014：IE11 / webpack / Babel / foundation上的Caractère不正确

Question

我正在更新我的网站上的依赖项。它适用于最近的浏览器，Edge，Chrome，Firefox。

但是在IE11上，我在这行上得到“SCRIPT1014：Caractère不正确”：

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Foundation\", function

我认为babel配置得很好，可以在IE11上运行，但事实并非如此。

这是我的配置文件Package.json：

{
  "name": "project_name",
  "version": "3.0.0",
  "description": "Starter project by us, build with foundation 6 & compiled with webpack 4",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development --watch",
    "build": "cross-env NODE_ENV=production webpack --progress",
    "proxy": "./node_modules/.bin/browser-sync start --config ./proxy.dev.json"
  },
  "keywords": [],
  "author": "Me",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^8.6.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "browser-sync": "^2.26.3",
    "cross-env": "^5.1.6",
    "css-loader": "^0.28.11",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^4.0.2",
    "postcss-loader": "^2.1.5",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.23.1",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.0.2"
  },
  "dependencies": {
    "jquery": "^3.2.1",
    "foundation-sites": "^6.5.1",
    "slick-carousel": "^1.6.0",
    "cleave.js": "^0.7.15",
    "family.scss": "^1.0.8",
    "url-safe-string": "^1.1.0",
    "jquery.easing": "1.4.1",
    "jquery-colorbox": "^1.6.4",
    "select2": "^4.0.3"
  }
}

.babelrc

    {
  "presets" : [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      }
    }],
  ]
}

webpack.config.js

    // webpack v4

const webpack = require('webpack');
const path = require('path');

// pour créer le fichier CSS on utilise extractText
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// pour minifier le CSS
const OptimizeCSSAssets = require("optimize-css-assets-webpack-plugin");
new OptimizeCSSAssets();

const devMode = process.env.NODE_ENV !== 'production';
var nodePath = path.resolve(__dirname, 'node_modules');

module.exports = {
    entry: [ './src/index.js'],
    output: {
        path: path.resolve(__dirname, '../public/assets'),
        filename: 'bundleV4.js'
    },
    module: {
        rules: [
            // babel converts ES6 JS into old-browser friendly JS, see .babelrc for more details
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: "babel-loader"
                }
            },
            // allow SCSS to be compiled in CSS
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            }

        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "appV4.css",
            chunkFilename: "[id].css"
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        })
    ],
};

// minify CSS for production
if (process.env.NODE_ENV === 'production') {
    module.exports.plugins.push(new OptimizeCSSAssets());
}

Answer 1

感谢Daniel Ruf，我找到了解决方案。

我删了.babelrc

我把它放在我的webpack.config.js文件中：

 module: {
    rules: [
        // babel converts ES6 JS into old-browser friendly JS, see .babelrc for more details
        {
            test: /\.js$/,

            use: {
                loader: "babel-loader",
                options: {
                    presets: ['@babel/preset-env'],
                    plugins: ['@babel/plugin-proposal-object-rest-spread']
                }

            }
        },

Answer 2

可能是因为缺少一些转换插件。尝试使用babel-plugin-transform-es2015-template-literals添加npm i babel-plugin-transform-es2015-template-literals -D并将其添加到您的.babelrc中

{
  "presets" : [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      }
    }],
  ],
  "plugins": ["transform-es2015-template-literals"]
}

见https://babeljs.io/docs/en/babel-plugin-transform-template-literals