当前位置：首页 > news >正文

通过webpack创建并打包js库到npm仓库

news 文章来源：https://blog.csdn.net/qq_34569497/article/details/133739180 2025/5/6 6:26:44

1.创建项目并进行基本配置

webpack配置文件： webpack.build.js

const path = require('path');module.exports = {mode:'development',entry:'./src/webpack-numbers.js',output: {filename: 'webpack-numbers.js',path: path.resolve(__dirname, 'dist'),clean: true,},};

package.json:

script:{"buildJs": "webpack --config ./webpack.build.js",
"dev": "set NODE_ENV=development && webpack serve --open --config ./webpack.dev.js --mode=development",
}

2.暴露库：需要通过 output.library 配置项暴露从入口导出的内容

注意：如果是暴露为ES Module时，不用同时设置name属性，build时会报错

    //   暴露库library: {//   library.type设置为module时不能设置同时设置nametype: 'module',},},

3.使用库

可以通过 script 标签使用，不演示

4.运行在 ES6、CommonJS、AMD、Node.js 等环境中

以上都只能通过script 标签使用，但是希望它能够兼容不同的环境

解决：更新 output.library 配置项，将其 type 设置为 'umd'：

output: {path: path.resolve(__dirname, 'dist'),filename: 'webpack-numbers.js',library: {name: 'webpackNumbers',type: 'umd',},},

我这里是将其导出为ES Module：

注意：

暴露为ES Module时，不能同时设置name属性;

且需要在output同级设置experiments.outputModule为true

    mode:'development',entry:'./src/webpack-numbers.js',output: {filename: 'webpack-numbers.js',path: path.resolve(__dirname, 'dist'),clean: true,//   暴露库library: {//   library.type设置为module时不能设置同时设置nametype: 'module',},},// 设置 type: 'module'时，必须加入以下配置experiments: { outputModule: true,},

5.library的type字段详解

library 可接受的数据类型是 string | string[] | object。string 是 object 类型的简写形式，当值为 object 类型时，object 中能包含的属性有 name、type、export、auxiliaryComment 和 umdNamedDefine。本文将重点放在 type 字段上，它决定如何公开当前库，取值基本固定，name 字段可以是任何字符串，它用来指定库的名称。

library.type = var(默认值)，{type: 'var', name: 'MyLibrary'}：通过MyLibrary能访问到add函数，但不能保证MyLibrary在全局变量上
library.type = window ，{type: 'window', name: 'MyLibrary'}：通过window.MyLibrary能访问到add函数。
library.type = module，将 library 的值改成 {type: 'module'}, 此时还要 experiments.outputModule 设置为 true。此时不存在闭包，并且能用 es modules 将库导入。
library.type = this，将 library 的值改成 {type: 'this', name: 'MyLibrary'}，通过 this.MyLibrary 能访问到 add 函数；
将 library 的值改成 {type: 'self', name: 'MyLibrary'}，此时通过 self.MyLibrary 可访问到 add 函数，在浏览器环境的全局上下文中 self 等于 window；
将 library 的值改成 {type: 'global', name: 'MyLibrary'}，此时 MyLibrary 会被分配到全局对象，全局对象会根据target值的不同而不同，全部对象可能的值是 self、global 或 globalThis。当 target 的值为 web（默认值），此时的打包结果与 library.type = self 结果一样。
library.type = commonjs，将 library 的值改成 {type: 'commonjs', name: 'MyLibrary'},
将 library 的值改成 {type: 'commonjs2', name: 'MyLibrary'}，CommonJs 规范只定义了 exports ，但是 module.exports 被 node.js 和一些其他实现 CommonJs 规范的模块系统所使用，commonjs 表示纯 CommonJs，commonjs2 在 CommonJs 的基础上增加了 module.exports。

webpack output.library的16 种取值方法示例_output.library.type-CSDN博客

7.使用命令npm run buildJs打包时报错

[webpack-cli] Error: Library name must be unset. Common configuration options that specific library names are 'output.library[.name]', 'entry.xyz.library[.name]', 'ModuleFederationPlugin.name' and 'ModuleFederationPlugin.library[.name]'.

[webpack-cli] Error: Library name must be unset. Common configuration options that specific library names are 'output.library[.name]', 'entry.xyz.library[.name]', 'ModuleFederationPlugin.name' and 'ModuleFederationPlugin.library[.name]'.

解决：library.type设置为module时不能设置同时设置name

    //   暴露库library: {//   library.type设置为module时不能设置同时设置name//name:'tools',type: 'module',},

6.外部化 lodash

如果工具包中将lodash也打包进去包体积会很大，所以可以通过设置externals属性将lodash包进行隔离不打包，但是这要求使用工具包的项目环境下安装了lodash这个被隔离的包。

externals: {lodash: {commonjs: 'lodash',commonjs2: 'lodash',amd: 'lodash',root: '_',},},

7.问题：导出为ES6报错：

ERROR in external {"commonjs":"lodash","commonjs2":"lodash","amd":"lodash","root":"_"}
Cannot read properties of undefined (reading 'length')
TypeError: Cannot read properties of undefined (reading 'length')

解决：配置ES6的外置依赖库 module: 'lodash'

    // 依赖工具库外置：要求引用的项目本身有这个工具库externals: {lodash: {commonjs: 'lodash',commonjs2: 'lodash',amd: 'lodash',//    配置ES module module: 'lodash',root: '_',},

8.问题二：webpack 外部化lodash后报错，reduce()方法找不到

将lodash外部化后，工具类中的引入lodash就不能再使用了，否则就会报错。注释掉引用即可用

// 注意外部化的时候，这里引入就不能直接引入了
// import _ from 'lodash';
import numRef from './data/ref.json';export function numToWord(num) {return _.reduce(numRef,(accum, ref) => {return ref.num === num ? ref.word : accum;},'');
}export function wordToNum(word) {return _.reduce(numRef,(accum, ref) => {return ref.word === word && word.toLowerCase() ? ref.num : accum;},-1);
}

9.外部化的限制

对于想要实现从一个依赖中调用多个文件的那些库，无法通过在 externals 中指定整个 library 的方式将它们从 bundle 中排除，而是需要逐个或者使用正则表达式排除它们。

module.exports = {//...externals: ['library/one','library/two',// 匹配以 "library/" 开始的所有依赖/^library\/.+$/,],
};

10.优化生产环境下的输出结果

为了优化生产环境下的输出结果。那么，我们还需要将生成 bundle 的文件路径，添加到 package.json 中的 main 字段中。

{..."main": "dist/webpack-numbers.js",...
}

或者，按照这个指南将其添加为标准模块

{..."module": "src/webpack-numbers.js",...
}

另外，为了暴露和库关联的样式表，你应该使用 MiniCssExtractPlugin。然后，用户可以像使用其他样式表一样使用和加载这些样式表。

11.发布到npm仓库

可以将其发布为一个 npm 包，并且在 unpkg.com 找到它，并分发给你的用户。

进入打包好后的文件夹dist，然后npm init 创建package.json文件，并且设置基本信息

{"name": "webpack-numbers-lmf","version": "1.0.4","description": "修改","main": "webpack-numbers.js","private": false,"scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "limingfang","license": "ISC"
}

npm login登录npm仓库

命令行输入用户名和密码后npm publish发布版本即可

12.使用：

npm i webpack-numbers-lmf lodash -S

import { numToWord,wordToNum } from "webpack-numbers-lmf"
console.log(numToWord(3), wordToNum("Ten") );

13.完整配置代码

webpack.build.js:

//webpack.build.js
const path = require('path');module.exports = {mode:'development',entry:'./src/webpack-numbers.js',output: {filename: 'webpack-numbers.js',path: path.resolve(__dirname, 'dist'),clean: true,//   暴露库library: {//   library.type设置为module时不能设置同时设置nametype: 'module',},},// 设置 type: 'module'时，必须加入以下配置experiments: { outputModule: true,},// 依赖工具库外置：要求引用的项目本身有这个工具库externals: {lodash: {commonjs: 'lodash',commonjs2: 'lodash',amd: 'lodash',//    配置ES module module: 'lodash',root: '_',},},};

//package.json
{"name": "webpack-demo","version": "1.0.0","description": "","private": false,"main": "dist/webpack-numbers.js","module": "src/webpack-numbers.js","scripts": {"buildJs": "webpack --config ./webpack.build.js","dev": "set NODE_ENV=development && webpack serve --open --config ./webpack.dev.js --mode=development","prod": "set NODE_ENV=production && webpack serve --open --config ./webpack.prod.js --mode=production"},
...
}

//webpack-numbers.js
// 注意外部化的时候，这里引入就不能直接引入了
// import _ from 'lodash';
import numRef from './data/ref.json';export function numToWord(num) {return _.reduce(numRef,(accum, ref) => {return ref.num === num ? ref.word : accum;},'');
}export function wordToNum(word) {return _.reduce(numRef,(accum, ref) => {return ref.word === word && word.toLowerCase() ? ref.num : accum;},-1);
}

dist里的package.json

{"name": "webpack-numbers-lmf","version": "1.0.4","description": "修改","main": "webpack-numbers.js","private": false,"scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "xxx","license": "ISC"
}

使用：

//index.js
import _ from 'lodash';
import { numToWord,wordToNum } from "webpack-numbers-lmf"function component() {console.log(numToWord(3), wordToNum("Ten") );return element;
}document.body.appendChild(component());