# 01-custom-library-npm > ```js npm init -y npm i webpack webpack-cli lodash -D ``` #### 2）配置webpack * 将项目中使用lodash也打包进项目中，增大了项目的体积（不推荐） ```js // webpack.config.js const path = require('path') Latest version **1.0.2** (published 2022-02-28) · ISC license · 0 weekly downloads ## Install ```sh npm install 01-custom-library-npm pnpm add 01-custom-library-npm yarn add 01-custom-library-npm bun add 01-custom-library-npm ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.2 | | Published | 2022-02-28 | | First published | 2022-02-28 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 78.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | lyy_2021 | ## Links - npm: https://www.npmjs.com/package/01-custom-library-npm - npm.io page: https://npm.io/package/01-custom-library-npm ## Recent versions - 1.0.2 (latest) — 2022-02-28 - 1.0.1 — 2022-02-28 - 1.0.0 — 2022-02-28 ## README ## 1、项目搭建 #### 1）项目初始化安装依赖 ```js npm init -y npm i webpack webpack-cli lodash -D ``` #### 2）配置webpack * 将项目中使用lodash也打包进项目中，增大了项目的体积（不推荐） ```js // 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等第三方包外部化，由用户安装（推荐） ```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', }, }, // 外部扩展：https://webpack.docschina.org/configuration/externals/#externals externals: { lodash: { commonjs: 'lodash', commonjs2: 'lodash', amd: 'lodash', root: '_', }, }, } ``` #### 3）配置npm script并打包构建 ```js "build": "webpack --config webpack.config.js" ``` 同时将`package.json`文件中`main`设置为打包构建的文件 ```js "main": "dist/webpack-numbers.js", ``` ## 2、发布流程 #### 1）将npm的registry设置为官方的仓库（我们需要将包发布到官方仓库） * 不能发布到`taobao，taobao`镜像是只读镜像，会发布失败 * 若要发布的私服，需要将仓库地址设置为私服地址 ```js 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` ```js npm logout //登出 // 如果不知道当前登录的账号可以用who命令查看身份： npm who am i // 发布的包在72小时内是可以删除的 npm unpublish [@] npm unpublish 01-custom-library-npm@1.0.1 ``` ## 3、更新包 * 1、修改完包的代码后，还需要更新下`package.json`中的`version`（不能和之前的版本相同） * 2、已经登录过了，只需使用发布命令`npm publish`更新包 ## 4、发布注意问题 * 1、必须将`registry`设置为官方仓库，否则发布失败 * 2、每次修改后重新发布，需要修改`package.json`中的版本号 ## 5、测试 * CommonJS：在test文件夹下创建test.js，可以使用node去运行代码 ```js // test.js const webpackNumbers = require('../dist/webpack-numbers') console.log(webpackNumbers.numToWord(3)); ``` * script 标签测试：在test文件夹下创建index.html ```html ``` ## 5、webpack支持es模块引入 --- _Source: https://npm.io/package/01-custom-library-npm · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._