创建通用JS公共模块并发布至npm

title: 创建通用JS公共模块并发布至npm tags:

• UMD
• rollup
• verdaccio
• npm categories:
• 模块化

概要内容

• 创建：JS公共模块
• 打包：使用rollup 打包公共模块
• 发布：js公共模块至verdaccio平台
• 发布：js公共模块至npm平台

如何创建JS公共模块

由于代码有点多就不贴代码了，直接去代码仓库看吧 传输门

rollup

• 简介：

  Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。

• 使用起因：

  公共相关的js文件想弄成单独的一个模块，方便后续开发使用，而不是不停的copy 和paste，所以就去了解怎么样把js公共相关js 打包成一个模块。

• 安装

  pnpm install -g rollup
  

• 创建配置文件

  // rollup.config.js
  import json from 'rollup-plugin-json';
  import babel from 'rollup-plugin-babel';
  import {uglify} from 'rollup-plugin-uglify';
  import {version} from '../package.json';
  import multiEntry from "rollup-plugin-multi-entry";
  import {terser} from "rollup-plugin-terser";
  
  export default {
      input: 'src/*.js',
      output: {
          /*输出公共库路径*/
          file: 'lib/index.js',
          /*配置：UMD 通用定义模块，支持前端端跨平台模块化*/
          format: 'umd',
          name: 'JSCommonUtils',
          /*压缩和混淆js*/
          plugins: [terser(), uglify()],
          /*JS前缀: 添加库相关信息*/
          banner: '/* JSCommonUtils version ' + version + ' */',
          /*JS尾部: 添加个人相关信息*/
          footer: '/* follow me on github aa4790139 */'
      },
      plugins: [
          json(),
          babel({
              /*过滤node_modules编译*/
              exclude: 'node_modules/**'
          }),
          /*允许多输入源*/
          multiEntry()
      ],
  };
  
  

verdaccio

• 简介： 开源轻量的npm私服包管理平台
• 使用起因：

  创建好自己的js公共模块时，我们需要在浏览器和Node.js 环境中测试，有了verdaccio 就非常方便我们测试了。而不是去不停npm本地公共模块搞得非常蛋疼，而且很容易出问题，所以为了简单和方便我们使用verdaccio 搞个私有仓库，方便我们模拟安装使用。

• 安装

  pnpm install -g verdaccio
  

• 启动

  verdaccio
  

发布至verdaccio平台

• 常用命令

//1. 添加用户
npm adduser --registry http://localhost:4873
//2. 发布至私有仓库位置
npm publish --registry http://localhost:4873
// 撤回发布刚发布包
npm unpublish --force --registry http://localhost:4873 
// 撤回发布的指定包
npm unpublish package_name  --force --registry http://localhost:4873

• 效果图

发布至npm平台

• 创建.npmignore 文件，过滤掉无需上传的文件和目录

node_modules/*
src/
build/
.babelrc
.gitignore
package-lock.json
pnpm-lock.yaml
!node_modules/crc32
!node_modules/deflate-js

提示: .npmignore文件内容，需要忽略的文件和目录写前面，需要排除忽略的文件或目录前加!写后面

• 效果图

参考文献：

• verdaccio 官网
• verdaccio 搭建配置
• rollup.js 中文文档
• rollup 官网打包实践
• Rollup.js 实战学习笔记
• .npmignore: ignore whole folder except given file types

以上: 如发现有问题，欢迎留言指出，我及时更正