我已经在这个问题上花了几个小时了,但我被卡住了。
tl;dr:将我的自定义组件与 webpack 潜在客户捆绑在一起,出现undefined
或'call' of undefined
错误(加载未捆绑的供应商包时)。请参阅下面生成的 webpack 配置。
我用一个简单的 TypeScript 包创建了一个单声道存储库。当我使用 tsc 转译它时,一切正常。但是一旦我使用中继,我就遇到了问题。所以我想,我只是使用webpack。说起来容易做起来难。
当然,我只想捆绑,必要的。还有我目前的问题:当捆绑包尝试解决../../node_modules/react/index.js
时出现错误。
我认为commonjs2
可能是要走的路,因为我在另一个 webpack 项目中使用该包。
const webpackConfig = {
mode: "production",
resolve: {
extensions: [ ".web.js", ".mjs", ".js", ".json", ".web.jsx", ".jsx", ".tsx", ".ts" ],
modules: [
"<mono-repo-root>/node_modules",
"<mono-repo-root>/packages/custom-navigation/packages"
],
alias: {
packages: "<mono-repo-root>/packages/custom-navigation/packages",
react: "<mono-repo-root>/node_modules/react",
"react-dom": "<mono-repo-root>/node_modules/react-dom"
}
},
module: {
rules: [
{
test: /.ts(x)?$/,
enforce: "pre",
use: [
{
loader: "tslint-loader",
options: {
configFile: "<mono-repo-root>/tslint.js",
tsConfigFile: "<mono-repo-root>/tsconfig.json",
formatter: "stylish",
emitErrors: false
}
}
]
},
{
test: /.ts(x)?$/,
exclude: [ /node_modules/ ],
use: [
{
loader: "babel-loader",
options: {
presets: [ "@babel/preset-react" ],
plugins: [ "relay" ]
}
},
{
loader: "ts-loader",
options: {
configFile: "<mono-repo-root>/packages/custom-navigation/tsconfig.json"
}
}
]
},
{
test: /.mjs$/,
include: /node_modules/,
type: "javascript/auto"
}
]
},
plugins: [
// Add module names to factory functions so they appear in browser profiler.
new webpack.NamedModulesPlugin(),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
new webpack.EnvironmentPlugin( getEnv() ),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebookincubator/create-react-app/issues/240
new CaseSensitivePathsPlugin(),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^./locale$/, /moment$/)
],
node: {
"dgram": "empty",
"fs": "empty",
"net": "empty",
"tls": "empty",
"child_process": "empty"
},
optimization: {
minimize: false,
splitChunks: {
chunks: "all"
}
},
target: "node",
entry: "<mono-repo-root>/packages/custom-navigation/Navigation.tsx",
output: {
path: "<mono-repo-root>/packages/custom-navigation/dist",
filename: "index.js",
library: "@custom/navigation",
libraryTarget: "commonjs2", // tried umd, commonjs and commonjs2
publicPath: "/dist/"
},
externals: [
webpackNodeExternals(), // npmjs.com/package/webpack-node-externals
webpackNodeExternals( { modulesDir: 'packages/custom-navigation/node_modules' } )
]
}
天哪,我已经这么近了!事实证明,commonjs2
确实是正确的libraryTarget
.但是,拥有splitChunks: { chunks: "all" }
实际上会在这里造成麻烦,并且实际上会尝试解决供应商模块而不是忽略它。
dr:删除optimization.splitChunks
我一直在问这个问题,以防万一其他人遇到同样的问题。