0

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

在此处输入图像描述 在此处输入图像描述

我也在使用@babel/preset-react，因为我的应用程序的一部分是根据反应制作的。

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

这些是我的配置文件：

包.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
        }),
    ]
};

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

4

3 回答 3

2

来自 react-spring 文档：

浏览器支持

该库是为常青浏览器编译的 es 模块，具有以下浏览器列表配置：>1%，不是死的，不是 11，不是 op_mini 全部。如果您需要支持遗留目标或处理不支持模块的目标，您可以通过简单地将 .cjs 附加到您的导入来使用 commonJS 导出。

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

将此与您的 webpack 配置为*.js通过babel-loader以下排除进行发送的事实相结合：

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

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

于 2019-06-27T22:16:09.030 回答
1

在你的 .babelrc 中试试这个

{
  "presets": ["@babel/preset-react",
    [ "@babel/preset-env", {
        "targets": {
          "ie": "11",
        }
      }
    ]
  ]
}
于 2019-06-27T21:42:52.080 回答
1

问题是（正如你之前所说）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

于 2019-06-28T14:05:55.020 回答