2.0.0 • Published 3 years ago

xialuoer-first-package v2.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

hello world

这是我的第一个npm包

如何发布第一个npm包

1.拥有一个npm官方账号

在官网进行注册,https://www.npmjs.com/ 账号、密码、邮箱

2.编写一个包

webpack 除了可以⽤来打包应⽤,也可以⽤来打包 js 库

学习案例: (1)实现⼀个⼤整数加法库的打包

  • 需要打包压缩版和⾮压缩版本
  • ⽀持 AMD/CJS/ESM 模块引⼊

(2)库的目录结构和打包要求 打包输出的库名称:

  • 未压缩版 large-number.js
  • 压缩版 large-number.min.js

构建如下目录:

(3)如何将库暴露出去?

  • library: 指定库的全局变量
  • libraryTarget: ⽀持库引⼊的⽅式

(4)如何指对 .min 压缩 通过 include 设置只压缩 min.js 结尾的⽂件 ps:需提前安装terser插件,npm i terser-webpack-plugun -D

webpack.config.js配置文件设置如下:

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
    entry: {
        'large-number': './src/index.js',
        'large-number.min': './src/index.js'
    },
    output: {
        filename: '[name].js',
        library: 'largeNumberXialuoer', // 打包出来的库名字
        libraryTarget: 'umd', // 引用库的一个方法
        libraryExport: 'default' // ⽀持库引⼊的⽅式
    },
    mode: 'none',
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                include: /\.min\.js$/  //设置只压缩 min.js 结尾的⽂件
            })
        ]       
    }
}

(5)设置入口文件 package.jsonmain 字段为 index.js,这样可以保证生产环境用压缩的包,非生产环境用非压缩的包

if (process.env.NODE_ENV === "production") {
module.exports = require("./dist/large-number.min.js");
} else {
module.exports = require("./dist/large-number.js");
}

3.发布npm包

(1)在终端登陆npm账号,npm login,如若报错,指定为官方镜像,执行 npm publish --registry https://registry.npmjs.org,输入账号、密码、邮箱、验证码等完成登录(ps: 填写密码没有显示,盲打就行,打完回车键) (2)执行发布命令 ,npm publish or npm publish --registry https://registry.npmjs.org ps: 发布有延迟,可能一时半会在npm官网上搜索不到,或者去自己账号下的package下查看

(3) npm unpublish 包名 --force //删除已发布包

4.注意事项

  • npm unpublish 命令只能删除 72 小时以内发布的包

  • npm unpublish 删除的包,在 24 小时内不允许重复发布

  • 发布包的时候要慎重,尽量不要往 npm 上发布没有意义的包!