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

2023年7月8日 185次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞