51601


ReactでIE11向けサイトを作成しているのですが、  
Chromeでは使用できるarrow関数がIE11では構文エラーとなってしまいます。

`@babel/plugin-transform-arrow-functions`
はarrow関数をfunctionに変換してくれるプラグインだという認識ですが正しいでしょうか。  
buildした際にarrow関数が残ってしまいます。

[![arrow関数が残ってしまいます。](https://i.stack.imgur.com/CaY1Q.png)](https://i.stack.imgur.com/CaY1Q.png)

設定は下記になります。

**package.json**

[code]

      "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"
      },
    
[/code]

**webpack.config.js**

[code]

    // 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
      }
    }
    
[/code]


CC BY-SA 4.0
2018-12-28T07:28:35.933
51577
2021-04-04T00:57:09.890
2021-04-04T00:57:09.890
32986
20868
question
reactjs internet-explorer axios
IE11でarrow関数の変換ができない @babel/plugin-transform-arrow-functions が機能しない


問題は`react-global-configuration`が依存しているパッケージである`serialize-
javascript`内でアロー関数が使用されている点にあります。ご提示の`babel-loader`の設定に`exclude:
/node_modules/`とありますから、`node_modules`内にある依存モジュールに対してはbabelの処理が行なわれていません。

実は、この問題は`serialize-
javascript`側で[昨日修正されました](https://github.com/yahoo/serialize-
javascript/pull/42)。ですので、以下のコマンドを実行して`serialize-
javascript`を最新版にアップデートしてからビルドし直すことで解決すると思われます。

[code]

    npm update serialize-javascript --depth 2
    
[/code]

* * *

これは余談ですが、`@babel/plugin-transform-arrow-functions`は不要ではないかと思います。

今回は`@babel/preset-env`が使用されており、アロー関数もこれで処理されてしまうためです。


CC BY-SA 4.0
2018-12-29T09:25:23.730
51601
2018-12-29T12:08:28.780
2018-12-29T12:08:28.780
30079
30079
51577
answer