NPM包制作

 

制作npm包然后发布到npm上提供给内部使用或者提供给外部人员使用

一、 初始化 package.json

npm init -y

*** 注意 ***

• name: 必须是唯一的名称(在npm在线中央仓库中没有同名的）
• main： 必须指定为打包生成的is文件
• keywords: 指定一些方便别的程序员搜索到当前库的关键字(我这里提供内部使用没有添加)

二、 安装包

npm install --save webpack wepack-cli

webpack简单配置需要的拿去

const path = require('path');

module.exports = {
  mode: 'development', // development / production
  entry: './index.js',  // 入口文件
  output: { // 出口文件
    path: path.resolve(__dirname, 'dist'),
    filename: 'onesight-npm-utils.js',
    library: 'aUtils',  // 对外暴露对象名称
    libraryTarget: 'umd'
  }
}

webpack 需要安装因为需要后续打包压缩测试使用

三、 暴露和调用

// index.js
import moment from 'moment';

export const dateFomartUTCStr = 'LL HH:mm dddd (UTC Z)'
// 将zh-CN转成zh，en-US转成en
export function formatLanguage(getLocale) {
  return getLocale === 'en-US' ? 'en' : 'zh';
}

webpack 使用build之后在index.html调用

<script src="./dist/onesight-npm-utils.js"></script>
<script>
  console.log(aUtils)
</script>

四、 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.npmis.com/
• 关键信息：用户名/密码/邮箱（需要验证）

六、 添加用户

注册完成后 - 到你要发布的项目中添加已经注册的用户

• 执行：npm login ( 官网推荐 npm adduser)
• 登陆npm仓库
• 依次指定用户名/密码/邮箱

七、发布仓库

• 执行 npm publish

发布时候可能会出现

403 Forbidden 是这是package.json中name和别人冲突了导致的，更换一个独立的name即可

426 Upgrade Required 是没有配置npm仓库或者node包版本过低导致

八、 更新代码后再发布

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

九、强制删除已发布的库

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

十、 发布成功测试

• 新建项目初始化npm
• 安装onesight-npm-utils
• 调用安装包

<script src='./node_modules/onesight-npm-utils/dist/onesight-npm-utils.js'></script>

• 查看结果

<script> console.log(aUtils) </script>