Webpack - 类型错误: $ 不是一个函数。

Question

我对Webpack不熟悉，正在使用Webpack创建一个React应用程序。在编译时，出现了以下错误：TypeError: $不是函数。

我没有使用jQuery，但我的Node模块包含一些第三方库。

我只能找到一个相关的文章，但它与jQuery有关。 Webpack - $ is not a function

我的Webpack和Babel配置是否有问题？

webpack.config.js

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = (env) => {
 console.log("WEBPACK ENV: ", env);

 const isDevMode = env !== "production";

 let config = {
  entry: ["./src/index.js"],
  output: {
   path: path.resolve(__dirname, "dist"),
   filename: "[name].[contenthash].js"
  },
  resolve: {
   extensions: [".js", ".jsx"]
  },
  plugins: [
   new CleanWebpackPlugin(),
   new FaviconsWebpackPlugin("./src/logo.png"),
   new HtmlWebpackPlugin({
    template: "./src/index.html",
    minify: {
     collapseInlineTagWhitespace: true,
     collapseWhitespace: true,
     removeComments: true,
     removeRedundantAttributes: true
    }
   }),
   new MiniCssExtractPlugin({
    filename: "[name].[contenthash].css"
   })
  ],
  module: {
   rules: [
    {
     test: /\.scss$/,
     use: ["css-loader", "sass-loader"]
    },
    {
     test: /\.jsx?$/,
     exclude: /node_modules\/(?!(sdk1|sdk2)\/).*/,
     use: ["babel-loader"]
    },
    {
     test: /\.(ac3|gif|jpe?g|m4a|mp3|ogg|png|svg|otf)$/,
     loader: "file-loader",
     options: {
      outputPath: "./assets"
     }
    }
   ]
  },
  optimization: {
   minimize: true,
   minimizer: [new OptimizeCssAssetsPlugin(), new TerserPlugin()],
   splitChunks: {
    cacheGroups: {
     vendors: {
      test: /[\\/]node_modules[\\/]/,
      name: "vendors",
      chunks: "all"
     }
    }
   }
  }
 };

 // Mode
 config.mode = isDevMode ? "development" : "production";

 // Dev Tools
 config.devtool = isDevMode ? "inline-source-map" : false;

 // Plugins
 if (!isDevMode) {
  config.plugins.push(new BundleAnalyzerPlugin({ analyzerPort: 8181 }));
 }

 // Dev Server
 if (isDevMode) {
  config.devServer = {};
  config.devServer.disableHostCheck = true;
 }

 return config;
};

babel.config.js

module.exports = {
 plugins: [
  "@babel/plugin-syntax-dynamic-import",
  "@babel/plugin-transform-object-assign",
  [
   require.resolve("babel-plugin-module-resolver"),
   {
    root: ["./src/"],
    alias: {
     js: "./src/js",
     scss: "./src/scss",
     components: "./src/js/components",
     containers: "./src/js/containers",
     phaser_path: "./src/js/phaser",
     services: "./src/js/services",
     constants: "./src/js/constants"
    }
   }
  ]
 ],
 presets: [
  [
   "@babel/preset-env",
   {
    useBuiltIns: "usage",
    corejs: 3,
    modules: false,
    debug: true,
    targets: {
     browsers: [">0.25%", "ie >= 11"]
    }
   }
  ],
  [
   "@babel/preset-react",
   {
    development: true
   }
  ]
 ]
};

我认为它与html-webpack-plugin相关，但我不确定。感谢任何帮助。

谢谢

- PR7

---

@Emixam23 你好，请查看我下面发布的答案。基本上，我必须删除useBuiltIns属性并使用其他方法进行填充。希望对你有所帮助。 - PR7

Answer 1

目前我正在使用这个方法作为一个临时解决方案，因为 useBuiltIns 属性对我不起作用。

安装了以下包：babel-polyfill、es6-promise、whatwg-fetch

npm i babel-polyfill

npm i --save-dev es6-promise whatwg-fetch

在 webpack.config.js 中进行以下更改

1. 在顶部引入 es6-promise require("es6-promise").polyfill();
2. 将 whatwg-fetch 和 babel-polyfill 添加到配置文件的 entry 属性中，如下所示
   entry: ["whatwg-fetch", "babel-polyfill", "./src/index.js"]

- PR7