我在这里需要帮助.
我捆绑了一个自定义库(以示例LibraryJS命名,它使用lodash作为依赖项.
在webpack配置中,我将lodash设置为外部依赖项,如下所示:
{
externals: {
"lodash"
}
}
效果很好.
但是,当我想在另一个项目中使用此库时,出现以下错误:“ libraryjs.js:77 Uncaught ReferenceError:未定义lodash”
这是以下行:
/***/ }),
/* 1 */
/***/ (function(module, exports) {
=> module.exports = lodash;
/***/ }),
事实是,我在项目中也使用lodash,因此它应该可以正常工作.
我究竟做错了什么?
顺便说一句,我正在使用gulp browserify捆绑我的项目,并使用gulp gulp-webpack捆绑了图书馆.
编辑:我找到了一种修复错误的方法,但是我真的不想坚持使用此修复程序,因为它的确是…丑陋的.
const lodash = require('lodash')
window.lodash = lodash; // <= The fix, ugh
感谢您的帮助!
解决方法:
在尝试构建库时,我遇到了类似的情况-这是我找到的解决方案.
目标:
构建一个依赖Lodash的库,但不要在该库包中包含Lodash.
图书馆的使用者有责任使Lodash可供我们的图书馆使用.
我使用了文档的Authoring Libraries部分来组合此解决方案.
特别是这两部分:
> Externalize Lodash
> Expose the Library
还有一个示例项目也显示了此配置:
https://github.com/webpack/webpack/tree/master/examples/externals
解:
1.捆绑我们的图书馆,不包括lodash
// "my-lib" package.json
{
"name": "my-lib",
"version": "0.5.0",
"main": "my-lib.js",
"peerDependencies": {
"lodash": "^4.17.5"
},
"devDependencies": {
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14"
}
}
这是导入lodash并使用它的示例库.请注意,尽管我们依赖lodash,但它不会包含在我们的捆绑包中.
// lib-entry.js
import _ from "lodash";
export default function doubleUp(listOfNum){
// Do something using lodash
let result = _.flatMap(listOfNum, (i) => [i, i]);
return result;
}
这是捆绑我们的库的webpack.config.js,但不包括lodash:
// "my-lib" webpack.config.js
module.exports = {
entry: {
'my-lib': './lib-entry.ts',
},
output: {
filename: '[name].js',
// [1]
libraryTarget: 'umd',
/*
[2]
NOTE: until this issue is fixed: https://github.com/webpack/webpack/issues/6525
we need to define `globalObject` in Webpack 4 to correctly build a universal library
(i.e. node and browser compatible).
*/
globalObject: 'this',
},
externals: {
// [3]
'lodash': {
commonjs: 'lodash',
commonjs2: 'lodash',
amd: 'lodash',
root: '_',
},
},
resolve: {
extensions: ['.js'],
},
};
[1]这告诉Webpack为不同的环境捆绑我们的库(因此它可以通过以下方式加载:浏览器脚本,Node CommonJS,AMD和下游Webpack项目).注意:这是必需的,否则[3]中的externals config将在您的软件包中输出一个错误的未定义模块.
[2] Webpack 4错误的解决方法(如果您将来使用,请检查是否仍然相关并需要).在此也描述:https://*.com/a/49119917/81723
[3]从文档中:“设置外部选项以定义应在目标环境中解决的依赖项”.我们要告诉Webpack从库包中排除lodash,我们的库的使用者有责任提供它.
2.在下游应用程序中使用该库
定义一个依赖于我们的my-lib库的应用程序:
// "my-app" package.json
{
"name": "my-app",
"version": "1.0.0",
"dependencies": {
"lodash": "^4.17.5",
"my-lib": "^0.5.0"
},
"devDependencies": {
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14"
}
}
我们的应用程序将lodash导入其环境中(因为我们的库需要它),然后使用我们的库:
// app-entry.js
import _ from "lodash";
import doubleUp from "my-lib";
let result = doubleUp([1, 2, 3]);
console.log(result); // [1, 1, 2, 2, 3, 3]
这是我们的应用程序的webpack.config.js:
// "my-app" webpack.config.js
const path = require('path');
module.exports = {
entry: {
'my-app': './app-entry.ts',
},
output: {
filename: '[name].js',
},
resolve: {
extensions: ['.js'],
alias: {
/*
[1]
Resolve all `lodash` requests to the same location otherwise
we end up with two versions loaded into the bundle, one
for `my-lib` and one for `my-app`.
*/
lodash: path.resolve('./node_modules/lodash/index.js'),
}
},
};
[1]此别名配置意味着Webpack每次遇到require(‘lodash’)或从“ lodash”导入…时;它将解析为磁盘上的这一模块.我发现我必须这样做,以避免将多个版本的lodash加载到我的捆绑包中. Webpack为my-app提供了一个版本,为my-lib提供了一个版本,但这已对其进行了修复,以使两者都具有相同的版本.