Question

我正在使用webpack以及babel和preset-env编写JS应用，以编译代码并确保浏览器兼容性，正在编译代码，但在IE11上却出现此错误：

我还使用@ babel / preset-react，因为我的应用程序的一部分是在react上完成的。

脚本似乎可以正常编译/运行，直到到达该行为止，babel正在编译代码，但是该行（我认为这是react-spring的一部分）会引发错误。

这些是我的配置文件：

package.json

{
  "name": "elementor-pl",
  "version": "1.0.0",
  "description": "Includes photologo blocks as elementor widgets",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "Echko Limited",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "autoprefixer": "^9.5.1",
    "babel-loader": "^8.0.6",
    "browser-sync": "^2.26.3",
    "browser-sync-webpack-plugin": "^2.2.2",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "postcss-loader": "^3.0.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "sass-loader": "^7.1.0",
    "webpack": "^4.29.6",
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.3.0"
  },
  "dependencies": {
    "@babel/runtime": "^7.4.4",
    "@glidejs/glide": "^3.3.0",
    "apollo-boost": "^0.3.1",
    "braintree-web": "^3.44.2",
    "graphql": "^14.2.1",
    "graphql-tag": "^2.10.1",
    "jquery": "^3.4.0",
    "owl.carousel": "^2.3.4",
    "react-app-polyfill": "^1.0.1",
    "react-slick": "^0.24.0",
    "react-spring": "^8.0.19",
    "react-translate": "^7.0.0",
    "slick-carousel": "^1.8.1"
  },
  "browserslist": {
    "production": [
      ">0.05%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

.babelrc：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@babel/transform-runtime"
    ]
}

webpack.config：

var path = require("path");
var webpack = require("webpack");
var BrowserSyncPlugin = require("browser-sync-webpack-plugin");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
// var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

var PROXY_URL = 'http://localhost/explore/';

module.exports = {
    entry: {
        front: "./src/index.js",
        dashboard: "./src/controls/index.js"
    },
    module: {
        rules: [{
                test: /\.(js|jsx)$/,
                exclude: [/node_modules/, /controls/],
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.(css|sass|scss)$/,
                exclude: [/node_modules/, /controls/],
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [require('autoprefixer')({
                                'browsers': ['> 1%', 'last 2 versions']
                            })],
                        }
                    },
                    'sass-loader',
                ]
            },
            {
                test: /\.gql$/,
                exclude: [/node_modules/, /controls/],
                use: [
                  {
                    loader: 'graphql-tag/loader'
                  },
                ]
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: 'file-loader',
                options: {
                    name: 'img/[hash].[ext]',
                },
            },
            {
                test: /\.(eot|ttf|woff)$/i,
                loader: 'file-loader',
                options: {
                    name: 'fonts/[name].[ext]',
                },
            }
        ]
    },
    output: {
        path: path.join(__dirname, "/"),
        filename: "[name]-bundle.js",
    },
    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin({}),
            // new UglifyJsPlugin(),
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
        // new BundleAnalyzerPlugin(),
        new MiniCssExtractPlugin({
            filename: 'styles.css'
        }),
        new BrowserSyncPlugin({
            proxy: PROXY_URL,
            files: [
                '**/*.php'
            ],
            reloadDelay: 0
        }, {
            reload: true,
            injectCss: true
        }),
    ]
};

您知道造成此错误的原因以及可能的解决方案吗？

Answer 1

在您的.babelrc中尝试

{
  "presets": ["@babel/preset-react",
    [ "@babel/preset-env", {
        "targets": {
          "ie": "11",
        }
      }
    ]
  ]
}

Answer 2

来自react-spring文档：

浏览器支持

该库是为具有以下浏览器列表配置的常绿浏览器编译的es模块：> 1％，不死，不即11 ，不是op_mini all。如果您需要支持旧式目标或处理不支持模块的目标，则可以通过将.cjs附加到导入中来使用commonJS导出。

https://www.react-spring.io/

使用以下说明将您的Webpack配置为通过*.js发送babel-loader来结合使用：

exclude: [/node_modules/, /controls/],

这意味着react-spring根本没有被Babel触及。

Answer 3

问题是（如前所述）react-sprint> 8.0.5在IE上不起作用，也没有被babel编译，我改正了导入Common JS软件包的问题：

import { useSpring } from 'react-spring/web.cjs'

这个GitHub问题帮助我解决了这个问题： https://github.com/react-spring/react-spring/issues/552

使用babel

3 个答案: