npm-JZTXT

创建工具包项目

安装Node

创建项目

创建一个空的项目文件夹: utils
在文件夹下执行命令 npm init -y

下载依赖包

npm i webpack webpack-cli

配置webpack

//webpack.config.js
const path = require('path')
module.exports = {
  // 模式
  mode: 'development', // 也可以使用 production
  // 入口
  entry: './src/index.js', 
  // 出口
  output: {
    // 打包文件夹
    path: path.resolve(__dirname, 'dist'),
    // 打包文件
    filename: 'utils.js', 
    // 向外暴露的对象的名称
    library: 'aUtils',
    // 打包生成库可以通过esm/commonjs/reqirejs的语法引入
    libraryTarget: 'umd', 
  },
}

在入口JS中暴露功能

// src/index.js
export function test() {
  document.write('测试自定义包')
  console.log('test()')
}

配置打包命令

// package.json
"scripts": {
  "build:watch": "webpack --watch"
},

对项目进行打包

npm run build:watch

测试使用自定义包

<!-- test/first.html -->
<body>
  <script src="../dist/utils.js"></script>
  <script>
    aUtils.test()
  </script>
</body>

发布到npm中央仓库

完善 package.json

注意:
name: 必须是唯一的名称(在npm在线中央仓库中没有同名的)
main: 必须指定为打包生成的js文件
keywords: 指定一些方便别的程序员搜索到当前库的关键字

{
  "name": "a-utils",
  "version": "1.0.0",
  "author": "xfzhang",
  "description": "自定义工具函数库",
  "keywords": [
    "atguigu",
    "utils",
    "array",
    "object",
    "function",
    "string",
    "axios",
    "event-bus",
    "pub-sub",
    "promise"
  ],
  "main": "dist/utils.js",
  "license": "MIT",
  "scripts": {
    "build:watch": "webpack --watch",
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^5.10.0",
    "webpack-cli": "^4.2.0"
  }
}

npm配置

npm配置的中央仓库不能是淘宝镜像
发布前必须执行: npm config set registry https://registry.npmjs.org/
不用发布时: npm config set registry http://registry.npm.taobao.org/
查看配置: npm config list

注册npm中央仓库账号

注册地址: https://www.npmjs.com/
关键信息: 用户名/密码/邮箱(需要验证)

添加用户

执行: npm addUser 或者 npm login
登陆npm仓库
依次指定用户名/密码/邮箱

发布仓库

执行: npm publish
发布失败, 原因是库的名称重复了, 修改name为一个唯一值, 再发布

更新代码后再发布

修改项目库的版本号: package.json 中的version 从1.0.0 改为1.0.1, 注意一定要变大
修改代码后重新打包: npm run build
执行发布: npm publish

强制删除已发布的库

执行: npm unpublish --force
注意: 必须在72小时内, 否则不能再删除

使用自定义工具包

下载工具包

npm install a-utils

网页中引入并使用

<script src="./node_modules/a-utils/dist/utils.js"></script>
<script>
  aUtils.test()
</script>

模块化引入并使用

// 使用ESM引入
import {test} from 'a-utils2'
test()

// 使用commonjs引入
const {test} = require('a-utils2')
test()