关于前端:使用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  | KEYWORDSfsdgq-test                |                      | =ioguanqi       | 2021-12-02 | 1.0.1    |

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

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

mkdir fegq-testcd fegq-testnpm 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 fieldsand exactly what they do.Use `npm install <pkg>` afterwards to install a package andsave 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.jsconst 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.jsconst $ = 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.jsconst 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> webpackasset mytest.js 617 bytes [emitted] [minimized] (name: main)./index.js 64 bytes [built] [code generated]./lib/index.js 218 bytes [built] [code generated]external "jQuery" 42 bytes [built] [code generated]webpack 5.64.4 compiled successfully in 425 ms

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

测试

这里应用jest来进行测试。

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

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

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

// ./my.test.jsconst 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 totalTests:       1 passed, 1 totalSnapshots:   0 totalTime:        0.851 s, estimated 1 sRan all test suites.

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

验证办法

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

mkdir example

// ./example/node.jsconst 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-testthis 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.1npm notice === Tarball Contents ===npm notice 1.1kB LICENSEnpm notice 178B  README.mdnpm notice 117B  add.test.jsnpm notice 453B  example/browser.htmlnpm notice 87B   example/node.jsnpm notice 64B   index.jsnpm notice 218B  lib/index.jsnpm notice 879B  package.jsonnpm notice 642B  webpack.config.jsnpm notice === Tarball Details ===npm notice name:          fegq-testnpm notice version:       0.0.1npm notice filename:      fegq-test-0.0.1.tgznpm notice package size:  2.2 kBnpm notice unpacked size: 3.7 kBnpm notice shasum:        2309f87ecd92c1c05cfe01ca1277208c530e483cnpm notice integrity:     sha512-xzksvqJrB7fgQ[...]Azc7jvZ2UXJnQ==npm notice total files:   9npm notice+ fegq-test@0.0.1

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

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

常见问题

cdn地址出错

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

最初

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

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