[英]Webpack Uncaught ReferenceError: require is not defined after removing node_modules from bundle.js
bundle.js 2.83 kB 0 [emitted] main
bundle.js.map 3.36 kB 0 [emitted] main
When I add the code below with the custom externals, I can remove the node_modules
from being directly included in the bundle.js
output. 当我使用自定义外部代码添加下面的代码时,我可以删除
node_modules
直接包含在bundle.js
输出中。
bundle.js 743 kB 0 [emitted] main
bundle.js.map 864 kB 0 [emitted] main
This significantly reduces the bundle size. 这显着减少了束大小。 But I get an error in the browser saying:
Uncaught ReferenceError: require is not defined
in the browser. 但我在浏览器中收到一条错误消息:
Uncaught ReferenceError: require is not defined
在浏览器中Uncaught ReferenceError: require is not defined
。 Does anyone know how to fix this issue? 有谁知道如何解决这个问题?
var path = require("path"),
fs = require("fs");
// return what's in the node modules folder apart from ".bin"
const nodeModules = fs
.readdirSync("./node_modules")
.filter(d => d != ".bin");
/**
* Remove non-direct references to modules from bundles
*
* @param {any} context
* @param {any} request
* @param {any} callback
* @returns
*/
function ignoreNodeModules(context, request, callback) {
// IF someone is importing a module e.g. "import {chatModule} from
// "./components/chat" using a relative path, then we're okay with them bringing
// in into the bundle
if (request[0] == ".")
return callback();
// IF someone is doing "import {Subject} from "rxjs/Subject" only want to know
// if first part is a node_module
const module = request.split("/")[0];
if (nodeModules.indexOf(module) !== -1) {
// append "commonjs " - tells webpack to go and grab from node_modules instead
// of including in bundle
return callback(null, "commonjs " + request);
}
return callback();
}
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "bundle.js"
},
devtool: "source-map",
resolve: {
extensions: ["", ".ts", ".tsx", ".js"]
},
module: {
loaders: [
{
test: /\.ts(x?)$/,
loader: "ts-loader"
}
]
},
// Runs our custom function everytime webpack sees a module
externals: [ignoreNodeModules]
}
Your bundle is smaller because you're not including your node_modules
, but this leads to a fundamental problem: you no longer send your dependencies to the browser, so your code can't run at all . 您的捆绑包较小,因为您没有包含
node_modules
,但这会导致一个基本问题: 您不再将依赖项发送到浏览器,因此您的代码根本无法运行 。 As you probably know, browsers don't natively support require()
, so your current ignoreNodeModules
function tells Webpack to skip bundling them and leave in the require()
, but the browser doesn't know how to handle it. 您可能知道,浏览器本身不支持
require()
,因此您当前的ignoreNodeModules
函数告诉Webpack跳过捆绑它们并留在require()
,但浏览器不知道如何处理它。
If you want to reduce bundle size, consider using Webpack's code splitting so that you only bundle dependencies that are needed for each page/section. 如果要减少包大小,请考虑使用Webpack的代码拆分,以便只捆绑每个页/节所需的依赖关系。 Alternatively, you could consider using a browser-side
require()
loader such as RequireJS . 或者,您可以考虑使用浏览器端的
require()
加载程序,例如RequireJS 。
Using externals
is only really useful for distributing server-side Node libraries, where you would expect consumers of your library to provide your dependencies rather than bundling them with your library. 使用
externals
对于分发服务器端节点库非常有用,您可以期望库的使用者提供依赖项,而不是将它们与库捆绑在一起。
The comments on the documentation about externals
are also worth reading for some further context on the issue. 关于
externals
文档的评论也值得一读,以便进一步了解该问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.