0%

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

概要内容

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

如何创建JS公共模块

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


rollup

  • 简介:

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

  • 使用起因:

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

  • 安装
    1
    pnpm install -g rollup
  • 创建配置文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    // 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 搞个私有仓库,方便我们模拟安装使用。

  • 安装
    1
    pnpm install -g verdaccio
  • 启动
    1
    verdaccio

发布至verdaccio平台

  • 常用命令
    1
    2
    3
    4
    5
    6
    7
    8
    //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 文件,过滤掉无需上传的文件和目录

    1
    2
    3
    4
    5
    6
    7
    8
    9
    node_modules/*
    src/
    build/
    .babelrc
    .gitignore
    package-lock.json
    pnpm-lock.yaml
    !node_modules/crc32
    !node_modules/deflate-js

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

  • 效果图


参考文献:


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

如何文章对你有益,请给我买杯豆浆喝