你还没有撸一个包扔到npm上？

2024年5月19日 172次阅读 来源: codexu

再不撸个包扔上去，以后起名字都是问题😢。

这次帮助没有上传过npm包的同学了解一下流程，写一个简单的背景音乐控制插件。

开发流程

  • 使用 npm 初始化项目
  • 创建 __mocks__ 文件夹用于测试插件
  • 安装开发依赖(rollup、babel、eslint)
  • 使用 ES6 编写插件核心代码
  • 使用 rollup & babel 打包编译(UMD)
  • 发布到 npm

使用npm初始化项目

创建文件夹 x-music，这个名字被我用了，你们换个别的吧～
然后使用 npm init 指令会创建一个 package.json 文件在根目录下。

  $ npm init

package.json有俩点很重要

  • name: 你这个包的名字，由于现在重名较多，npm已经推荐使用 @codexu/** 这种形式，codexu 就是我的npm账户名，你可以看到 vue、babel 等等都开始使用这种方式了。
  • version: 每次向 npm publish 时会检测版本号，本次提交必须大于上次提交的版本号。

创建 __mocks__ 文件夹用于测试插件

谁也不能一次性写对代码是吧，__mocks__ 里创建个测试环境用于插件测试和调试。

这里我使用了我自己的脚手架工具 x-build ，当然你也可以用你习惯的脚手架或者手动撸几个文件和文件夹去测试你的插件。

如果你想使用 x-build，请使用以下命令安装（不使用直接跳过这段）：

  $ npm install -g x-build-cli
  $ x-build create __mocks__ -q

-q 参数是快速生成模板，无需自定义。

安装开发依赖

  • 使用 rollup 作为打包工具，配置比 webpack 简单，而且打包出来的效果很好。
  • babel 可以让你使用 ES6 语法
  • eslint 还是很建议使用，毕竟你要写一款开源插件，别人可能会来阅读你的源码，规范点没差。
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-eslint": "^10.0.1",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-latest": "^6.24.1",
    "eslint": "^5.10.0",
    "rollup-plugin-babel": "^3.0.2",
    "rollup-plugin-node-resolve": "^3.0.0",
    "rollup-plugin-uglify": "^2.0.1",
    "uglify-es": "^3.1.3"
  }

安装最新版本我不能确保你会不会中途报错。

创建文件

  • .eslintrc.js
  • .babelrc
  • .npmignore
  • rollup.config.js

.eslintrc.js

eslint配置有很多，这里我使用了我比较习惯的方式 .eslintrc.js ，里面有中文注释，没怎么用过eslint的小伙伴可以进来看看。

.babelrc

这是 rollup 官方文档推荐的配置：

{
  "presets": [
    ["latest", {
      "es2015": {
        "modules": false
      }
    }]
  ],
  "plugins": ["external-helpers"]
}

.npmignore

这个文件可以把你不想到 npm 文件或文件夹屏蔽掉，随意发挥吧。

.DS_Store
.git
__mocks__
node_modules

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import uglify from 'rollup-plugin-uglify';
import { minify } from 'uglify-es';

export default {
  input: './index.js',
  output: [{
    file: `./dist/x-music.min.js`,
    name: `XMusic`,
    format: 'umd'
  },{
    file: `./dist/x-music.es.min.js`,
    format: 'es'
  }],
  plugins: [
    resolve(),
    babel({
      exclude: 'node_modules/**'
    }),
    uglify({}, minify)
  ]
};

顺便修改一下package.json

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

这样使用 npm run build 就可以打包了。

使用 ES6 编写插件核心代码

这块并不是本文的核心，想看代码的可以看这里。

发布到 npm

如果你还没有 npm 账户，请注册，然后在终端里输入指令：

  $ npm login

输入你的账户邮件和密码，然后通过指令：

  $ npm publish

就会被上传到 npm。

如果你希望别人也使用你的插件，最好在 README.md 中写好使用文档。

最后还是安利一下自己的项目【X-BUILD】，希望大家给几颗宝贵的star，让我简历好看点～

Github: https://github.com/codexu/

X-BUILD文档: https://codexu.github.io/

    原文作者：codexu
    原文地址: https://segmentfault.com/a/1190000017439558
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞