如何编写一个 npm 插件？

提到写 npm 插件，很多没搞过的可能第一感觉觉得很难，无从下手，其实不然。

我们甚至写个简单的 console.log('hello word')，都是可以当成一个插件发布上去的。

其实无从下手的主要难点还是在于你的具体要做的功能逻辑，这个理清楚了，写插件并没有想象的那么难。

接下来，我们来看下具体插件编写的思路。

一、首先，建个项目

拿我想做一个 h5 前端的水印插件为例，思路就是用 canvas 去绘制，创建 dom，然后用 js 把这个 dom 添加到页面中去。

根据这个思路，我要用到的是纯纯的 js 就够了。但是我的文件夹不能乱放吧，该有的代码规范总归还得尽量保持一下（日行一善）。

那就弄个src目录，入口文件index.js，主逻辑文件watermark.js，公共库文件utils.js，全局配置文件config.js等等。这样一套下来，目录结构也就起来了。

这个是我最终的插件目录，就大概参考一下。

再想想，怎么在入口文件index.js引入我们的主逻辑，或者在xx.js中引入xxx.js?

是不是想说，用import、export呗。

是的！但是这种语法，有的浏览器（拿IE举例）不认识啊，或者你想用一些 es6+ 语法、ts、eslint等等，那我们就得用到打包工具，把它转义成浏览器能识别的 js 代码。

二、打包工具选择

2.1 webpack 和 rollup

提到打包工具，日常搬砖过程中，最常用的应该是webpack和rollup，这里对它俩的区别不过多的介绍，大概的理解为一般涉及到web页面开发相关的插件就用webpack，纯js的功能性插件就用rollup。

这里用rollup来举例，相比webpack，它的配置对新手更容易理解一些。

三、依赖项安装

3.1 安装 rollup、ts

• rollup
• typescript
• rollup-plugin-commonjs 支持识别commonjs类型
• @rollup/plugin-typescript 支持编译ts
• …（可根据需要安装更多的依赖）

npm install -s-d rollup typescript rollup-plugin-commonjs @rollup/plugin-typescript

3.2 安装 babel

• @babel/core
• @babel/preset-env
• rollup-plugin-babel
• rollup-plugin-terser
• …（可根据需要安装更多的依赖）

npm install -d @babel/core @babel/preset-env rollup-plugin-babel rollup-plugin-terser

四、依赖项配置

4.1 rollup配置

rollup的作用就是把我们最终的源代码进行打包压缩，生成最终的插件文件。这里拿最主要的 3 个配置属性来讲一下。 也可以参考这个配置 package.json、rollup.config.js

{
   
  input: "src/index.ts", // 入口文件，必须
  plugins: [
    rollupTypescript(