我在Project React库中使用打字稿和ES6
版本的javascript。 IE11不支持某些ES6功能,因此我必须使用Babel
,但是我的应用程序未正确加载到IE11
它在这里引发语法错误
什么原因导致此问题?应该使用此软件包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]',
}
}
]
}
]
}};