Webpack - TypeError：$ 不是函数

Posted 2023-02-21

【中文标题】Webpack - TypeError：$ 不是函数

【英文标题】：Webpack - TypeError: $ is not a function

【发布时间】：2020-07-06 02:43:31

【问题描述】：

我是 webpack 的新手，我正在使用 webpack 创建一个反应应用程序。我在编译 TypeError: $ is not a function 时遇到此错误。

我没有使用 jquery，但我的节点模块包含一些第三方库。

我只能找到一篇与此问题相关的文章，但它与 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 有关，但我不确定。任何帮助表示赞赏。

谢谢

【问题讨论】：

嘿！您找到解决方法了吗？

@Emixam23 嗨，请查看我在下面发布的答案。基本上我不得不删除useBuiltIns 属性并使用其他方法来填充。我希望它对你的情况有所帮助。

【参考方案1】：

我目前正在使用它作为 polyfill 的解决方法，因为 useBuiltIns 属性不适合我。

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

npm i babel-polyfill

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

在 webpack.config.js 中做了这些改变

需要 es6-promise 在顶部 require("es6-promise").polyfill(); 像这样将whatwg-fetch 和babel-polyfill 添加到配置中的entry 属性entry: ["whatwg-fetch", "babel-polyfill", "./src/index.js"]