从0开始创建自己的npm包

本文主要记录本人从零开始开发一个 npm 包的过程，包的功能不是重点。

开始创建

创建一个文件夹 util-test

初始化 package.json

npm init -y

配置入口文件地址main:"src/index.js"，因为使用es6语法开发，所以配置mode:"module",此时生成文件如下：

{
  "name": "util-test",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

挂载插件 rollup.js

Rollup 是一个 JavaScript 模块打包工具，可以将多个小的代码片段编译为完整的库和应用

npm i rollup -D

根目录创建 rollup.config.js,简单配置一下：

export default {
  input: "src/index.js",
  output: [
    {
      file: "dist/utilx-umd.js",
      format: "umd",
      name: "utilx",
      //当入口文件有export时，'umd'格式必须指定name
      //这样，在通过<script>标签引入时，才能通过name访问到export的内容。
    },
    {
      file: "dist/utilx-es.js",
      format: "es",
    },
    {
      file: "dist/utilx-cjs.js",
      format: "cjs",
    },
  ],
};

在 package.json 中新增命令：

"scripts": {
    "build":"rollup -c"
  },

配置 babel

npm i -D @rollup/plugin-babel @rollup/plugin-node-resolve
npm i -D @babel/core @babel/preset-env

添加以下代码到 rollup.config.js:

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';

export default {
  input: ...,
  output: ...,
  plugins: [
    resolve(),
    babel({ babelHelpers: 'bundled' })
  ]
};

在根目录创建 .babelrc

{
  "presets": [
    ["@babel/env", {"modules": false}]
  ]
}

打包

最后执行 npm run build，就可以打包了（可能会报错，需要注意node版本，我用的14.16.0，改为16.13.0后打包成功）， 在 dist 中就可以看到打包后的文件了

更改入口文件 package.json

{
  ...
  "main": "dist/utilx-cjs.js",
  "module": "dist/utilx-es.js",
  "unpkg": "dist/utilx-umd.js",
  ...
}

发布

npm login
npm publish

使用

npm i util-xx 

<script>
    import * as util from "uitl-xx"
    console.log(util.hello());
</script>