bundle.js 中的 IE11 错误由无效字符引起

Question

我正在使用带有 awesome-typescript-loader 和 Webpack 的 typescript 进行编译。但在 IE11 中它不起作用。我有这个错误。

SCRIPT1014

bundle.js (58458,12)

在这一行我有这个。我认为问题出在性格上`

const v6 = `

这是我对 tsconfig.json 的配置

{
  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "declaration": false,
    "esModuleInterop": true,
    "noImplicitAny": false,
    "jsx": "react",
    "sourceMap": true,
    "noLib": false,
    "suppressImplicitAnyIndexErrors": true,
    "baseUrl": "./src/",
    "paths": {
      "@pages": ["./pages/*"],
      "@core": ["./core/*"],
      "@pods": ["./pods/*"],
      "@common": ["./common/*"],
      "@state": ["./state/*"]
    },
    "skipLibCheck": true
  },
  "compileOnSave": false,
  "exclude": ["node_modules"]
}

这是我的 webpack.config.js

    var HtmlWebpackPlugin = require("html-webpack-plugin");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var webpack = require("webpack");
var path = require("path");

var basePath = __dirname;

module.exports = {
  context: path.join(basePath, "src"),
  resolve: {
    extensions: [".js", ".ts", ".tsx"],
    alias: {
      // Later on we will add more aliases here
      pages: path.resolve(__dirname, "./src/pages/"),
      core: path.resolve(__dirname, "./src/core/"),
      pods: path.resolve(__dirname, "./src/pods/"),
      common: path.resolve(__dirname, "./src/common/"),
      state: path.resolve(__dirname, "./src/state/"),
    }
  },
  entry: ["@babel/polyfill", "./index.tsx"],
  output: {
    path: path.join(basePath, "dist"),
    filename: "bundle.js"
  },
  devtool: "source-map",
  devServer: {
    contentBase: "./dist", // Content base
    inline: true, // Enable watch and live reload
    host: "test",
    port: 8080,
    stats: "errors-only",
    disableHostCheck: true,
    historyApiFallback: true,
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        loader: "awesome-typescript-loader",
        options: {
          useBabel: true,
          babelCore: "@babel/core" // needed for Babel v7
        }
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: "file-loader",
        options: {
          name: "assets/img/[name].[ext]?[hash]"
        }
      }
    ]
  },
  plugins: [
    //Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: "index.html", //Name of file in ./dist/
      template: "index.html", //Name of template in ./src
      hash: true
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

通过 .babelrc 文件

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

我对这个问题没有更多的想法。

Answer 1

请检查字符，可能您使用的是中文符号字符'`'。尝试将其更改为英文字符'''。

Answer 2

IE 11 不支持模板文字。 模板文字是 es6 语法，所以我建议你在 tsconfig 中使用 es5 目标

如果您不确定每个浏览器可以使用什么，请查看here