时间戳

首页 > 解决方案 > React 16.5 与 firefox 45.3.0 ers 的兼容性

reactjs - React 16.5 与 firefox 45.3.0 ers 的兼容性

问题描述

我想让我的应用程序使用 ff45.3.0 esr

我使用这些依赖项：

{
  "browserslist": [
    "defaults",
    "ie >= 9",
    "Firefox >= 45",
    "Chrome >= 48",
    "Safari >= 10"
  ],
  "babel": {
    "presets": [
      "@babel/preset-react",
      "@babel/preset-env"
    ],
    "plugins": [
      "lodash",
      "@babel/plugin-transform-regenerator",
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      "@babel/plugin-proposal-function-sent",
      "@babel/plugin-proposal-export-namespace-from",
      "@babel/plugin-proposal-numeric-separator",
      "@babel/plugin-proposal-throw-expressions",
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-syntax-dynamic-import",
      "@babel/plugin-syntax-object-rest-spread",
      [
        "@babel/plugin-transform-for-of",
        {
          "assumeArray": true
        }
      ],
      "react-hot-loader/babel"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.2",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.1.0",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-for-of": "^7.0.0",
    "@babel/plugin-transform-regenerator": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "babel-plugin-lodash": "^3.3.4",
    "copy-webpack-plugin": "^4.5.2",
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "react-hot-loader": "^4.3.11",
    "rimraf": "^2.6.2",
    "shelljs": "^0.8.2",
    "style-loader": "^0.23.0",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9",
    "webpack-merge": "^4.1.4"
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "bootstrap": "3.3.7",
    "core-js": "^2.5.7",
    "date-fns": "^1.29.0",
    "detect-browser": "^3.0.1",
    "file-saver": "^2.0.0-rc.3",
    "final-form": "^4.10.0",
    "font-awesome": "^4.7.0",
    "history": "^4.7.2",
    "hoist-non-react-statics": "^3.0.1",
    "invariant": "^2.2.4",
    "js-base64": "^2.4.9",
    "lodash": "^4.17.11",
    "moment": "^2.22.2",
    "moment-timezone": "^0.5.21",
    "normalizr": "^3.2.4",
    "prop-types": "^15.6.2",
    "query-string": "^6.2.0",
    "react": "^16.5.2",
    "react-datetime": "^2.15.0",
    "react-dom": "^16.5.2",
    "react-final-form": "^3.6.6",
    "react-helmet": "^5.2.0",
    "react-loadable": "^5.5.0",
    "react-notification-system": "^0.2.17",
    "react-portal": "^4.1.5",
    "react-redux": "^5.0.7",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-router-redux": "^5.0.0-alpha.9",
    "react-select": "1.2.1",
    "react-tooltip": "^3.8.4",
    "redux": "4.0.0",
    "redux-form": "^7.4.2",
    "redux-saga": "^0.16.0",
    "reselect": "^4.0.0",
    "whatwg-fetch": "^3.0.0"
  }
}

我的 webpack 4 配置：

const path = require('path');
const fs = require('fs');
const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const { ROOT_DIR, SRC_DIR, ENV } = require('./constants');

let template = path.join(ROOT_DIR, '/config/html/' + ENV + '.html');

if (!fs.existsSync(template)) {
  template = path.join(ROOT_DIR, '/config/html/development.html');
}

const htmlWebpackPlugin = new HtmlWebPackPlugin({
  template,
  filename: './index.html'
});

module.exports = {
  entry: [
    '@babel/polyfill',
    'whatwg-fetch',
    path.join(SRC_DIR, 'index'),
  ],
  output: {
    filename: '[name].[hash].js',
    chunkFilename: '[name].[chunkhash].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [
          path.resolve(ROOT_DIR, 'node_modules'),
        ],
        use: {
          loader: 'babel-loader'
        }
      },{
        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: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }

      ,{
        test: /\.(png|jpg|gif|eot|svg|woff|woff2|ttf|ogg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[hash].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(ENV)
      },
      __DEV__: ENV !== 'production'
    }),
    new CopyWebpackPlugin([
      path.join(ROOT_DIR, '/config/static/robot.txt')
    ]),
    htmlWebpackPlugin
  ]
};

使用 npx browserslist 我得到了我想要的一切：

但是在 Firefox 45.3.0 中我收到了警告...

并且应用程序不起作用...

谢谢

标签： reactjsfirefoxwebpackbabeljs

解决方案

推荐阅读