自建npm包-搭建，打包，调试，发布

简介

这里总结一个简单的npm包搭建，打包，调试，发布的基础点.

涉及内容

• npm初始化
• package.json 配置
• eslint配置
• babel配置
• rollup打包

包初始化

代码语言：javascript复制

// 新建包目录
md my-pkg

// 进入包目录
cd my-pkg

// npm 初始化
npm init -y

package.json配置

代码语言：javascript复制

{
    name: 'my-pkg', // 包名
    main: 'lib/index.js',  // 包加载时的入口文件
    version: 0.0.1, // 版本
    description: '', // 描述
    author: 'copy-left', // 作者
    contributors: '...', // 其他贡献者
    dependencies: {}, // 生产依赖
    devDependencies: {}, // 开发依赖
    repository：'',  // 源码地址
    keywords: ['test pkg', 'copy-left'], // 包搜索关键字
}

重点配置:

1. name 包名，为了避免包名已被使用，可以提前在npm中搜索相关的名称字段， 看是否已被使用
2. main 包引入地址, 当一个包被引入到项目中，被使用时，将通这个地址查找对应的入口文件.
3. version 版本号， 每次提交包到npm时，需要保证当前包版本与已发布的包版本不同，但没有要求版本的具体格式。例如： 现在线上的包版本为 v1.1.1， 我本地包的版本设置为 v1.0.0, 不会影响我的发布。

eslint

一般我们希望整体的代码风格一致，在多人同时开发或添加新功能时，减少不必要的沟通成本，同时eslint也能帮助我们防止一些编写上的低级错误，例如：未声明变量， 重复引入等

安装

代码语言：javascript复制

npm i -D eslint

创建配置文件 .eslintrc.[文件类型]

eslint 的配置方式可以通过package.json 或 独立的配置文件，具体参考eslint文档

代码语言：javascript复制

touch .eslintrc.yml

文件配置

代码语言：javascript复制

env: // 支持es6全局变量
  es6: true
  browser: true
extends: eslint:recommended // 使用eslint 默认规则
parserOptions:  
  ecmaVersion: 2019  // 支持es6语法校验
  sourceType: module // 使用es6模块语法
rules:  // 自定义规则配置
  indent: 
    - error
    - 2

babel

为了支持ES6语法，需要引入babel作为转换

安装

代码语言：javascript复制

npm i -D @babel/core @babel/preset-env  @babel/plugin-transform-runtime

创建配置文件

代码语言：javascript复制

touch .babelrc

文件配置

代码语言：javascript复制

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "useBuiltIns": "usage",
        "corejs": "2.6.10"
      }
    ]
  ],
  "plugins": [
      ["@babel/plugin-transform-runtime"]
  ],
  "ignore": [
      "node_modules/**"
    ]
}

rollup

因为我们使用了ES6，且希望包能在多个环境下运行。所以我们需要使用到打包工具

安装 rollup

代码语言：javascript复制

npm i -D rollup

安装 rollup 插件

代码语言：javascript复制

npm i -D rollup-plugin-node-resolve  rollup-plugin-commonjs rollup-plugin-babel rollup-plugin-eslint

创建 rollup.config.js 配置文件

代码语言：javascript复制

touch rollup.config.js

配置rollup

代码语言：javascript复制

import resolve from 'rollup-plugin-node-resolve'; // 依赖引用插件
import commonjs from 'rollup-plugin-commonjs'; // commonjs模块转换插件
import babel from "rollup-plugin-babel"; // babel 插件
import { eslint } from 'rollup-plugin-eslint'; // eslint插件

export default {

  input: './src/main.js', // 打包的入口文件
  output:{
    name: 'my-pkg',  // 输入的包名
    file: './bin/index.js', // 打包输出地址, 这里的导出地址就是package内main的地址
    format: 'umd' // 包类型
  },
  plugins: [  // 使用的插件
    resolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**',
      runtimeHelpers: true,
    }),
    eslint({ 
      throwOnError: true,
      include: ['src/**'],
      exclude: ['node_modules/**']
    })
  ],
  ignore: [
    "node_modules/**" // 忽略目录
  ]
  
}

如果需要多文件合并到同一文件，可以使用相关的rollup插件包, 这里导出的配置也可以为配置数组，表示多个打包配置。可以同时处理多文件多输入的情况

添加打包命令

代码语言：javascript复制

// package.json

{
    ....
   
    "script": {
       // 指定rollup运行的配置文件，并监听文件修改。
       "dev": "rollup -c rollup.config.js -w",
       "build": "rollup -c rollup.config.js",
    }
    // -c 执行配置文件
    // -w 监听文件修改，当文件修改后将重新打包
}

编写源码

代码语言：javascript复制

// 创建源码目录
md src

// 创建包入口文件
touch src/main.js


// 写入源码
// src/main.js

export function call(){
    console.log('copy-left !!!')
}

打包

代码语言：javascript复制

npm run build

调试

通过 npm link 将本地包注册到全局。我们可以在其他包内引用我们自己的包.

这里我们在根目录下新建 test测试目录，模拟包的引入及使用

创建test目录

代码语言：javascript复制

md test
touch test/index.js

全局注册包

代码语言：javascript复制

// 在包根目录下  /pkg
npm link

引入本地包

代码语言：javascript复制

// test 目录下
npm link my-pkg

编写调试

代码语言：javascript复制

// /test/index.js 

const myPkg = require('my-pkg')
myPkg.call()

因为这里直接使用node调用，所以node的包引入方式.

发布到npm

• npm官网注册npm账号
• npm login 登录npm
• npm publish 发布包

这里需要注意 npm的地址，当我们使用 cnpm， nrm等工具时。需要将当前的npm源地址切换回原来的npm地址。

相关文档

• eslint
• rollup
• npm
• 如何使用rollup打包前端组件/库

npm rollup.js eslint 打包 javascript

0 人点赞