从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>