如何发布NPM包

在日常开发过程中,我们经常使用引用一些第三方库来快速的进行项目开发,这得益于前端丰富的生态。

身为前端开发者的我们,可能也会遇到可复用、可抽离、可封装的模块,我们将其发布 NPM 包是一个很好的选择。

注册账号

发布 NPM 包,需要先注册 NPM 官网 https://www.npmjs.com/ 的账号,仅需一个邮箱即可。

创建 NPM 项目

新建一个文件夹并打开终端初始化项目;

npm init -y

此时会自动生成 package.json 的配置文件,这里主要包含了项目名称、版本号、作者、许可证等信息,同时可以记录项目的依赖信息以及自定义的脚本。

{
  "name": "项目名",
  "version": "1.0.0",
  "description": "项目简介",
  "type": "module",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": ["dist"],
  "scripts": {
    "build": "rollup -c"
  },
  "keywords": [],
  "author": "不二博客 ",
  "license": "ISC"
}

name 定义了项目的名称,它不可与现有的 NPM 名称重复;

version 定义了当前项目的版本号,每一次版本更新需大于当前版本;

license 定义了项目的许可证;

main 项目的入口文件,即第三方库默认导入的文件;

types 项目的类型定义文件;

files 定义了发布上传时包含的目录文件;

更多的配置项可以自行查阅资料。

打包工具

本文中我们使用 rollup 作为我们的打包工具,当然你也可以使用 vitewebpackunbuild 等等,你可根据个人爱好进行选择。

yarn add rollup -D

当然编写一个完善的 NPM 包,我们应该使用 TypeScript 来编写。

yarn add typescript @rollup/plugin-typescript tslib -D

配置 Rollup

根目录下创建 rollup.config.js 配置文件,添加如下配置;

import typescript from '@rollup/plugin-typescript'

export default {
  input: 'src/index.ts',
  output: {
    name: '全局变量名称',
    file: 'dist/index.js',
    format: 'umd',
  },
  plugins: [typescript()],
}

在以上的配置中,input 定义了项目的入口文件、output 定义了项目的编译输出的配置;

name 在全局的作用域中生成当前项目的全局变量名称;

file 指定了输出文件的路径;

format 指定输入文件的格式,不同的配置作用于不同的运行环境;

  • amd 是异步模块加载,可以在运行时按需加载和执行模块,适用于前端;

  • cjs 将打包 CommonJS 规范,适用于 Node 环境和其他打包工具;

  • es 将保留为 ES 模块文件,适用于支持 ES 模块的环境中直接使用;

  • iife 将打包为一个立即执行的函数,适用于

你可能感兴趣的:(npm,前端,node.js)