关于前端:使用webpack构建属于你自己的npm包

导语：最近做了几个我的项目，想对其中公共的局部进行提取，独自设置成 npm 包，以便别的我的项目能够应用，省去反复写的懊恼，在网上找了良久，终于寻得一个办法，能够打包本人的包到 npm，并且同时反对游览器和 node 环境应用，十分不便，当初就做一个开发总结。

筹备工作
编写一个办法
打包
测试
公布

查问 npm 包名称是否存在

因为是公布公开包，所以包名称必须是惟一的，不能反复。如果你不确定你的包名称是否曾经有人应用，能够关上命令行窗口查问一下。如果没有查到就能够持续，否则更换一个包名称。

npm search fegq-test

如果呈现一下后果就阐明包名称没有被应用，能够释怀公布你的包了。

No matches found for "fegq-test"

比方我之前公布过一个测试包fsdgq-test, 搜寻就会进去后果，这时就要更改包名，防止出错。

# 查问包名
npm search fsdgq-test

# 查问后果
NAME                      | DESCRIPTION          | AUTHOR          | DATE       | VERSION  | KEYWORDS
fsdgq-test                |                      | =ioguanqi       | 2021-12-02 | 1.0.1    |

新建一个文件夹，初始化一个包。

这个文件夹的名称，会默认为包名，当然前面也能够在 package.json 配置文件中批改。

mkdir fegq-test
cd fegq-test
npm init

初始化过程如下：

his utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (fegq-test) # 输出包名称，我这里是默认本文件夹为包名称，就省略了
version: (1.0.0) 0.0.1 # 版本号，我这里写 0.0.1 因为是刚公布第一版
description: this is a test package. # 对包的形容，我这里简略写一下
entry point: (index.js) ./dist/mytest.js # 入口文件，就是当他人下载你的包当前，导入的中央，这里我就写打包后的文件地址
test command: jest # 测试命令，包写好后，能够抉择一个测试语言来测试一下，这里我就用 jest 来测试
git repository: https://github.com/gitguanqi/fegq-test.git # 仓库地址，能够写 github,gitee 等仓库地址，这里我就新建一个 github 测试仓库
keywords: fegq-test,test # 关键词，设置多个逗号隔开，填写属于这个包相干的
author: gitguanqi # 包作者，写你本人就能够
license: (ISC) MIT # 包恪守的软件开发协定，罕用的有 MIT,GPL3 等
About to write to F:\web\front\test\template\npmlx\fegq-test\package.json:

{
  "name": "fegq-test",
  "version": "0.0.1",
  "description": "this is a test package.",
  "main": "./dist/mytest.js",
  "scripts": {"test": "jest"},
  "repository": {
    "type": "git",
    "url": "git+https://github.com/gitguanqi/fegq-test.git"
  },
  "keywords": [
    "fegq-test",
    "test"
  ],
  "author": "gitguanqi",
  "license": "MIT",
  "bugs": {"url": "https://github.com/gitguanqi/fegq-test/issues"},
  "homepage": "https://github.com/gitguanqi/fegq-test#readme"
}


Is this OK? (yes) # 间接回车解决

查看一下配置信息package.json。

{
  "name": "fegq-test",
  "version": "0.0.1",
  "description": "this is a test package.",
  "main": "./dist/mytest.js",
  "scripts": {"test": "jest"},
  "repository": {
    "type": "git",
    "url": "git+https://github.com/gitguanqi/fegq-test.git"
  },
  "keywords": [
    "fegq-test",
    "test"
  ],
  "author": "gitguanqi",
  "license": "MIT",
  "bugs": {"url": "https://github.com/gitguanqi/fegq-test/issues"},
  "homepage": "https://github.com/gitguanqi/fegq-test#readme"
}

装置所需的依赖包

接着装置 Babel，以及 webpack 以及 jest 系列依赖包

npm i babel-core babel-loader babel-plugin-add-module-exports babel-preset-env eslint webpack webpack-cli clean-webpack-plugin babel-jest jest jquery

新建一个 webpack.config.js 配置文件，写入一下内容。

// webpack.config.js
const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    mode: 'production', // 环境
    entry: './index.js', // 入口文件
    output: {path: path.resolve(__dirname, './dist'), // 输入文件夹
        filename: 'mytest.js', // 文件名称
        libraryTarget: 'umd', // 打包形式
        globalObject: 'this', // 全局对象
        library: 'mytest', // 类库名称
    },
    plugins: [new CleanWebpackPlugin(), // 革除上一次打包内容
    ],
    externals: {jquery: "jQuery", // 不参加打包编译},
}

output.libraryTarget 一共反对的值：

var – 默认值
assign
this
window
global
commonjs
commonjs2
amd
umd
jsonp

如果你应用了诸如 jquery,vue 之类的包，不想打包到你本人的包外面，能够应用externals。

例如：

externals: {jquery: "jQuery"},

筹备工作曾经实现，当初进入正题，比方写一个加法的和 dom 操作的两个办法的包。

新建一个 lib 文件夹，在面外面搁置次要的办法。

mkdir lib

编写办法

// ./lib/index.js
const $ = require('jquery');

function addCon () {$('#content').html('<h1>hello</h1>');
}

function add (a,b) {return a+b;}

const test = {
    addCon,
    add,
}

module.exports = test;

引入 lib 内容

在包根目录下新建一个 index.js 做 webpack 入口文件，导入刚刚写好的办法。

// ./index.js
const mytest = require('./lib/index');
module.exports = mytest;

这样一个本人的包就写好了，接下来进行打包操作。

新增打包命令。

在 package.json 的scripts外面新增一条脚本命令webpack。

如下：

{
  // ...
  "scripts": {"build": "webpack"},
  // ...
}

开始打包

运行 npm run build 即可开始打包。

# 启动打包命令
npm run build

# 打包后果
> fegq-test@0.0.1 build
> webpack

asset mytest.js 617 bytes [emitted] [minimized] (name: main)
./index.js 64 bytes [built] 
./lib/index.js 218 bytes [built] 
external "jQuery" 42 bytes [built] 
webpack 5.64.4 compiled successfully in 425 ms

打包胜利，当初能够进行简略的测试。

这里应用 jest 来进行测试。

文件命名规定：< 测试名称 >.test.js。

新建一个测试文件add.test.js。

写入以下内容, 这里对 add 办法进行测试。

// ./my.test.js
const add = require('./dist/mytest').add;

test('adds 1 + 2 to equal 3', () => {expect(add(1,2)).toBe(3);
})

开始测试

# 启动测试命令
npm run test

# 测试后果
> fegq-test@0.0.1 test
> jest

 PASS  ./add.test.js
  √ adds 1 + 2 to equal 3 (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.851 s, estimated 1 s
Ran all test suites.

能够看到曾经测试胜利了。

验证办法

新建一个 example 文件夹，写入 node.js 用于测试 node 环境，写入 browser.html 用于测试游览器环境。

mkdir example

// ./example/node.js
const fegqTestAdd = require('../dist/mytest').add;
console.log(fegqTestAdd(1,2)); // 3

运行 node ./example/node.js 查看一下，如果输入 3 阐明测试胜利。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>browser 测试 </title>
</head>
<body>
    <h2>fegq-test 测试 </h2>
    <script src="../dist/mytest.js"></script>
    <script>
        let result = mytest.add(1,2);
        console.log(result); // 3
    </script>
</body>
</html>

运行 live-server --port=4001 启动一个 http 服务，F12关上控制台输入 3 阐明测试胜利。

接下来就公布到 npm 下来吧。

包代码写好后，能够先保留到 github，而后再公布。

拉去仓库初始化内容

这里采纳 ssh 形式拉去和推送代码内容，省去用户权限验证等环节。

git clone git@github.com:gitguanqi/fegq-test.git

编写阐明文档，介绍你的包应用办法。

能够先写 cdn 地址

https://unpkg.com/

规定如下：

unpkg.com/:package@:version/:file

例如：

https://unpkg.com/jquery@3.6.0/dist/jquery.js

# fegq-test

this is a test package.

## use

+ browser

`<script src="https://unpkg.com/fegq-test@0.0.1/dist/mytest.js"></script>`

+ node

`npm install fegq-test`

而后推送到仓库。

git add .
git commit -m "add mytest"
git push origin main

好了，最初一步，公布你的包。

公布到 npm

如何公布公开 npm 包，我之前的这一篇《Node 发布命令》曾经说过了，这里就不再赘述。

我在这里就间接操作了。

# 启动发布命令
npm publish

# 公布后果
npm notice 
npm notice 📦  fegq-test@0.0.1
npm notice === Tarball Contents ===
npm notice 1.1kB LICENSE
npm notice 178B  README.md
npm notice 117B  add.test.js
npm notice 453B  example/browser.html
npm notice 87B   example/node.js
npm notice 64B   index.js
npm notice 218B  lib/index.js
npm notice 879B  package.json
npm notice 642B  webpack.config.js
npm notice === Tarball Details ===
npm notice name:          fegq-test
npm notice version:       0.0.1
npm notice filename:      fegq-test-0.0.1.tgz
npm notice package size:  2.2 kB
npm notice unpacked size: 3.7 kB
npm notice shasum:        2309f87ecd92c1c05cfe01ca1277208c530e483c
npm notice integrity:     sha512-xzksvqJrB7fgQ[...]Azc7jvZ2UXJnQ==
npm notice total files:   9
npm notice
+ fegq-test@0.0.1

接下来就能够在 npm 搜寻到你的包了。

我的包 npm 地址是 https://www.npmjs.com/package/fegq-test

cdn 地址出错

这里我查了一下是因为 .gitignore 文件禁止 dist 目录上传，进入文件删除一下即可。

以上就是如何公布一款属于本人的包，游览器和 node 环境都兼容可用的办法。

如果有什么不足之处，能够邮箱分割我。

目录

筹备工作

编写一个办法

打包

测试

公布

常见问题

最初