Babel Polyfill在Internet Explorer 11上不起作用

时间:2018-09-24 12:21:00

标签: reactjs typescript internet-explorer-11 babel webpack-4

我在Project React库中使用打字稿和ES6版本的javascript。 IE11不支持某些ES6功能,因此我必须使用Babel,但是我的应用程序未正确加载到IE11

它在这里引发语法错误

enter image description here

什么原因导致此问题?应该使用此软件包transform-es2015-arrow-functions解决此问题,还是我忽略了一些其他问题?

package.json

{
"name": "SkodaAuto.C3PO.AdminConsole.Web",
"private": true,
"version": "0.0.0",
"devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@types/webpack": "2.2.15",
    "@types/webpack-env": "1.13.0",
    "aspnet-webpack": "2.0.1",
    "aspnet-webpack-react": "3.0.0",
    "awesome-typescript-loader": "3.2.1",
    "babel-core": "^6.17.0",
    "babel-loader": "^8.0.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-eval": "^6.22.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "0.28.4",
    "eventsource-polyfill": "^0.9.6",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "^2.0.0",
    "less": "3.7.1",
    "less-loader": "4.1.0",
    "node-noop": "1.0.0",
    "style-loader": "0.18.2",
    "typescript": "3.0.1",
    "url-loader": "^1.1.1",
    "webpack": "^4.19.1",
    "webpack-cli": "^3.1.1",
    "webpack-hot-middleware": "2.18.2",
    "webpack-merge": "4.1.0"
},
"dependencies": {
    "@babel/polyfill": "^7.0.0",
    "@progress/kendo-data-query": "1.4.1",
    "@progress/kendo-drawing": "1.5.7",
    "@progress/kendo-react-buttons": "1.2.0",
    "@progress/kendo-react-dateinputs": "1.2.0",
    "@progress/kendo-react-dialogs": "1.2.0",
    "@progress/kendo-react-dropdowns": "1.2.0",
    "@progress/kendo-react-grid": "1.2.0",
    "@progress/kendo-react-inputs": "1.2.0",
    "@progress/kendo-react-intl": "1.2.0",
    "@progress/kendo-react-layout": "1.2.0",
    "@progress/kendo-react-pdf": "1.2.0",
    "@progress/kendo-theme-default": "2.54.1",
    "@telerik/kendo-intl": "^1.4.2",
    "@types/deep-equal": "1.0.1",
    "@types/history": "4.6.0",
    "@types/prop-types": "15.5.3",
    "@types/react": "16.4.2",
    "@types/react-dom": "16.0.7",
    "@types/react-hot-loader": "3.0.3",
    "@types/react-redux": "4.4.45",
    "@types/react-router": "4.0.12",
    "@types/react-router-dom": "4.0.5",
    "@types/react-router-redux": "5.0.3",
    "babel-polyfill": "^6.26.0",
    "bootstrap-less-port": "0.3.0",
    "deep-equal": "1.0.1",
    "history": "4.6.3",
    "jquery": "3.0.0",
    "query-string": "6.1.0",
    "react": "16.4.2",
    "react-appinsights": "1.0.4",
    "react-dom": "16.4.2",
    "react-hot-loader": "3.0.0-beta.7",
    "react-redux": "5.0.5",
    "react-resize-detector": "3.1.1",
    "react-router-dom": "4.1.1",
    "react-router-redux": "5.0.0-alpha.6",
    "redux": "3.7.1",
    "redux-form": "7.4.2",
    "redux-logger": "3.0.6",
    "redux-thunk": "2.2.0",
    "serialize-error": "2.1.0"
},
"scripts": {
    "build": "webpack --config webpack.config.js",
    "build.vendor": "webpack --config webpack.config.vendor.js"
}}

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const clientBundleOutputDir = './wwwroot/dist';

module.exports = {
devtool: 'inline-source-map',
entry: { 'main-client': './ClientApp/boot-client.tsx' },
resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    modules: [
        './node_modules',
        './ClientApp'
    ]
},
mode: `development`,
output: {
    filename: '[name].js',
    publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
    rules: [
        {
            test: /\.tsx?$/, include: [path.resolve(__dirname, clientBundleOutputDir)],
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: ['@babel-preset-env', '@babel/preset-react', 'es2015', "@babel/typescript"],

                    plugins: ["@babel/proposal-class-properties",
                        "@babel/proposal-object-rest-spread",
                        "transform-eval",
                        'transform-es2015-arrow-functions']
                }
            }]
        },
        { test: /\.json$/, loader: "json-loader" },
        { test: /\.tsx?$/, exclude: /(node_modules|bower_components)/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
        { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
        {
            test: /\.less$/, use: [{
                loader: 'style-loader' // creates style nodes from JS strings
            }, {
                loader: 'css-loader' // translates CSS into CommonJS
            }, {
                loader: 'less-loader' // compiles Less to CSS
            }]
        },
        {
            test: /\.(woff|woff2|ttf|eot)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                    }
                }
            ]
        }
    ]
}};

0 个答案:

没有答案