1、项目搭建
1）项目初始化安装依赖
npm init -y
npm i webpack webpack-cli lodash -D
2）配置webpack
- 将项目中使用lodash也打包进项目中，增大了项目的体积（不推荐）
// webpack.config.js
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
clean: true,
filename: 'webpack-numbers.js',
library: {
// library 向外暴露的对象名
name: 'webpackNumbers',
// 兼容不同的环境 CommonJS、AMD、Node.js 等
type: 'umd',
},
},
}
- 将lodash等第三方包外部化，由用户安装（推荐）
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
clean: true,
filename: 'webpack-numbers.js',
library: {
// library 向外暴露的对象名
name: 'webpackNumbers',
// 兼容不同的环境 CommonJS、AMD、Node.js 等
type: 'umd',
},
},
// 外部扩展：https://webpack.docschina.org/configuration/externals/#externals
externals: {
lodash: {
commonjs: 'lodash',
commonjs2: 'lodash',
amd: 'lodash',
root: '_',
},
},
}
3）配置npm script并打包构建
"build": "webpack --config webpack.config.js"
同时将package.json文件中main设置为打包构建的文件
"main": "dist/webpack-numbers.js",
2、发布流程
1）将npm的registry设置为官方的仓库（我们需要将包发布到官方仓库）
- 不能发布到
taobao，taobao镜像是只读镜像，会发布失败 - 若要发布的私服，需要将仓库地址设置为私服地址
npm config get registry
// 发布library需要使用官方仓库
npm config set registry https://registry.npmjs.org
npm config set registry https://registry.npm.taobao.org
2）在终端中登录npm
npm login输入用户名、密码和邮箱登录npm
3）发布library到npm
- 使用命令：
npm publish
npm logout //登出
// 如果不知道当前登录的账号可以用who命令查看身份：
npm who am i
// 发布的包在72小时内是可以删除的
npm unpublish <pkg>[@<version>]
npm unpublish [email protected]
3、更新包
- 1、修改完包的代码后，还需要更新下
package.json中的version（不能和之前的版本相同） - 2、已经登录过了，只需使用发布命令
npm publish更新包
4、发布注意问题
- 1、必须将
registry设置为官方仓库，否则发布失败 - 2、每次修改后重新发布，需要修改
package.json中的版本号
5、测试
- CommonJS：在test文件夹下创建test.js，可以使用node去运行代码
// test.js
const webpackNumbers = require('../dist/webpack-numbers')
console.log(webpackNumbers.numToWord(3));
- script 标签测试：在test文件夹下创建index.html
<body>
<script src="../dist/webpack-numbers.js"></script>
<script>
console.log(webpackNumbers);
</script>
</body>