ReactでIE11向けサイトを作成しているのですが、
Chromeでは使用できるarrow関数がIE11では構文エラーとなってしまいます。
@babel/plugin-transform-arrow-functions
はarrow関数をfunctionに変換してくれるプラグインだという認識ですが正しいでしょうか。
buildした際にarrow関数が残ってしまいます。
設定は下記になります。
package.json
"dependencies": {
"@babel/runtime": "^7.2.0",
"@fortawesome/fontawesome-svg-core": "^1.2.8",
"@fortawesome/free-solid-svg-icons": "^5.5.0",
"@fortawesome/react-fontawesome": "^0.1.3",
"aglio": "^2.3.0",
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"bootstrap-daterangepicker": "^3.0.3",
"echarts": "^4.2.0-rc.2",
"echarts-for-react": "^2.0.15-beta.0",
"getstorybook": "^1.7.0",
"global": "^4.3.2",
"jquery": "^3.3.1",
"mobx": "4",
"mobx-react": "^5.3.6",
"moment": "^2.22.2",
"prop-types": "^15.6.2",
"react": "^16.6.1",
"react-bootstrap-daterangepicker": "^4.1.0",
"react-content-loader": "^3.4.1",
"react-dom": "^16.6.1",
"react-global-configuration": "^1.3.0",
"react-icons": "^3.2.2",
"react-loading": "^2.0.3",
"react-loading-skeleton": "^1.0.0",
"react-router-dom": "^4.3.1",
"reactstrap": "^6.5.0"
},
"devDependencies": {
"@babel/core": "^7.1.5",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-decorators": "^7.1.2",
"@babel/plugin-transform-arrow-functions": "^7.2.0",
"@babel/polyfill": "^7.2.5",
"@babel/preset-env": "^7.1.5",
"@babel/preset-react": "^7.0.0",
"@storybook/react": "^4.0.8",
"babel-loader": "^8.0.4",
"babel-plugin-transform-runtime": "^6.23.0",
"css-loader": "^1.0.1",
"ol": "^5.3.0",
"style-loader": "^0.23.1",
"styled-components": "^4.1.1",
"uniqid": "^5.0.3",
"url-loader": "^1.1.2",
"uuid": "^3.3.2",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10",
"write-file-webpack-plugin": "^4.4.1"
},
webpack.config.js
// webpack.confing.js
const path = require('path')
const WriteFilePlugin = require('write-file-webpack-plugin')
module.exports = {
mode: 'development',
entry: ['./src/app.js'],
output: {
path: path.resolve(__dirname, './'),
filename: 'public/build.min.js'
},
plugins : [
new WriteFilePlugin(),
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
babelrc: false,
presets: [
['@babel/preset-env', {
useBuiltIns : 'usage',
targets : {
browsers : [
'last 2 versions',
'ie >= 11',
],
},
}],
'@babel/preset-react',
],
plugins: [
['@babel/plugin-proposal-decorators', {
legacy: true
}],
['@babel/plugin-proposal-class-properties', {
loose: true
}],
['@babel/plugin-transform-runtime', {
regenerator : true,
}],
['@babel/plugin-transform-arrow-functions', {
spec : false,
}],
]
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader?modules']
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(pdf|jpg|png|gif|svg|ico)$/,
use: ['url-loader']
}
]
},
resolve: {
extensions: ['.js', '.jsx']
},
devServer: {
contentBase: path.join(__dirname, './public'),
compress: true,
port: 9000
}
}