英文:
Node.Js WebPack Error when Using Dependency Array
问题
我在尝试弄清楚为什么在使用多个依赖项时，dependOn WebPack 属性失败时遇到困难。
如果我的入口点是：
./src/EntryA.js
let LibraryA = require("./library/LibraryA.js");
let LibraryB = require("./library/LibraryB.js");
class EntryA {
constructor() {
console.log("EntryA");
let libraryA = new LibraryA();
let libraryB = new LibraryB();
}
}
module.exports = EntryA;
其两个依赖项分别是：
./src/library/LibraryA.js
class LibraryA {
constructor() { console.log("LibraryA"); }
}
module.exports = LibraryA;
./src/library/LibraryB.js
class LibraryB {
constructor() { console.log("LibraryB"); }
}
module.exports = LibraryB;
然后，使用以下配置，WebPack 似乎没有问题地创建捆绑包：
module.exports = {
mode: "production",
entry: {
EntryA: {
import: "./src/EntryA.js"
}
},
output: {
filename: "[name].min.js",
path: path.resolve(__dirname, "bundle"),
libraryTarget: "var",
library: "[name]",
},
target: "web",
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: { presets: ["@babel/preset-env"] }
}
}
]
}
};
这是没问题的，但是当单个捆绑包变得太大，我想拆分依赖项时，我遇到了问题，就像使用以下更新的配置一样：
module.exports = {
mode: "production",
entry: {
EntryA: {
import: "./src/EntryA.js",
dependOn: ["LibraryA", "LibraryB"]
},
LibraryA: "./src/library/LibraryA.js",
LibraryB: "./src/library/LibraryB.js"
},
output: {
filename: "[name].min.js",
path: path.resolve(__dirname, "bundle"),
libraryTarget: "var",
library: "[name]",
},
target: "web",
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: { presets: ["@babel/preset-env"] }
}
}
]
}
};
看起来似乎正常工作，因为我仍然得到了我期望的三个捆绑包：
./bundle/LibraryA.min.js
./bundle/LibraryB.min.js
./bundle/EntryA.min.js
但是尝试在 HTML 文件中运行它们不再起作用（在不拆分依赖项的情况下可以工作）：
<html>
<head>
<script src="./bundle/LibraryA.min.js"></script>
<script src="./bundle/LibraryB.min.js"></script>
<script src="./bundle/EntryA.min.js"></script>
</head>
<body>
<script>
window.onload = () => { const entryA = new EntryA(); }
</script>
</body>
</html>
出现以下错误：
Uncaught TypeError: o[r] is not a function
Uncaught TypeError: EntryA is not a constructor
英文:
I'm having difficulty trying to figure out why the dependOn WebPack property is failing when using multiple dependencies.
If I have an entry point as :
./src/EntryA.js
let LibraryA = require("./library/LibraryA.js");
let LibraryB = require("./library/LibraryB.js");
class EntryA {
constructor() {
console.log("EntryA");
let libraryA = new LibraryA();
let libraryB = new LibraryB();
}
}
module.exports = EntryA;
With it's two dependencies as :
./src/library/LibraryA.js
class LibraryA {
constructor() { console.log("LibraryA"); }
}
module.exports = LibraryA;
./src/library/LibraryB.js
class LibraryB {
constructor() { console.log("LibraryB"); }
}
module.exports = LibraryB;
Then WebPack seems to have no problem creating the bundle with this config :
module.exports = {
mode: "production",
entry: {
EntryA: {
import: "./src/EntryA.js"
}
},
output: {
filename: "[name].min.js",
path: path.resolve(__dirname, "bundle"),
libraryTarget: "var",
library: "[name]",
},
target: "web",
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: { presets: ["@babel/preset-env"] }
}
}
]
}
};
This is fine but when the single bundle becomes too big and I want to split out the dependencies I run into problems, like with this updated config :
module.exports = {
mode: "production",
entry: {
EntryA: {
import: "./src/EntryA.js",
dependOn: ["LibraryA", "LibraryB"]
},
LibraryA: "./src/library/LibraryA.js",
LibraryB: "./src/library/LibraryB.js"
},
output: {
filename: "[name].min.js",
path: path.resolve(__dirname, "bundle"),
libraryTarget: "var",
library: "[name]",
},
target: "web",
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: { presets: ["@babel/preset-env"] }
}
}
]
}
};
It looks like it's working because I still get the three bundles I am expecting
./bundle/LibraryA.min.js
./bundle/LibraryB.min.js
./bundle/EntryA.min.js
But trying to run them in the HTML file no longer works (without splitting the dependencies it did work) :
<html>
<head>
<script src="./bundle/LibraryA.min.js"></script>
<script src="./bundle/LibraryB.min.js"></script>
<script src="./bundle/EntryA.min.js"></script>
</head>
<body>
<script>
window.onload = () => { const entryA = new EntryA(); }
</script>
</body>
</html>
With the errors :
Uncaught TypeError: o[r] is not a function
Uncaught TypeError: EntryA is not a constructor
答案1
得分: 0
以下是翻译好的部分：
唯一使这个工作的方式是将所有模块都改为使用 import 而不是 require，然后这三个捆绑似乎能够良好地协同工作。
我不完全知道为什么这样做能修复它，但依赖似乎不喜欢使用 require。
英文:
The only way I was able to get this to work was to change all of the modules to use import instead of require and then the three bundles seem to play nice with each other.
I don't fully know why this fixes it but the dependencies seem to not like using require
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论