如何构建一个libray库?构建完后怎么发布到npm让大家都可以用到?为什么要构建发布一个自己的函数库?本章就是想谈下这些问题。
webpack从0到1
panda-utils
webpack
写一个自己的函数库?因为有一些工具函数平常是用的比较多,每次起一个新的项目都要用到,同样的工具函数老是去找很麻烦,维护一份自己的函数库,能快速的找到api
(毕竟自己写的)且更高效的开发业务,何乐而不为?loadsh
、underscore.js
等等,公司也有公共的函数库,但是如果你自己上手构建一个自己专属的函数库,用着会更爽,也更香。$ npm init -y $ npm install webpack webpack-cli --save-dev 复制代码
build
文件夹里面放一些webpack
相关的配置,因为要区分环境,所以需要拆分成三个文件。-->webpack区分打包development和productionsrc
下新建个index.js
放我们的工具函数。panda-utils + |- build + |- webpack.common.js + |- webpack.dev.js + |- webpack.prod.js + |- /src + |- index.js |- package.json |- LICENSE |- README.md 复制代码
webpack.common.js
中:
libray
,这个就是你设置的一个变量名,它起到一个对外暴露的一个作用。libraryTarget
跟library
是相辅相成的,它有几种值,默认是是var
,可以设置为window
、this
之类的,如果你设置为window
,那么你引入这个包以后,window.pandaUtils
就可以打印出这个对象,大概就是起了这么个作用。import/require
这种模块化引入的,所以需要设置为umd
。panda-utils
之前我必须都先安装下loadsh
。var path = require("path"); module.exports = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "../dist"), filename: "panda-utils.js", library: "pandaUtils", libraryTarget: "umd" } }; 复制代码
# 安装babel相关,处理js $ npm install @babel/core @babel/preset-env babel-loader babel-plugin-add-module-exports --save-dev # 安装clean插件,打包前删除dist文件夹 $ npm install clean-webpack-plugin --save-dev 复制代码
webpack.common.js
中配置相关loader处理一下js:-->webpack.common.js.babelrc
文件配置下babel:-->.babelrc
mode:production
和sourcemap
,然后合并下webpack.common.js
就可以了。# 合并webpack配置的插件 $ npm install webpack-merge --save-dev 复制代码
const merge = require("webpack-merge"); const commonConfig = require("./webpack.common.js"); const prodConfig = { mode: "production", devtool: "cheap-module-source-map" }; module.exports = merge(commonConfig, prodConfig); 复制代码
$ npm install webpack-dev-server html-webpack-plugin --save-dev 复制代码
devServer
这个东西。-->webpack从0到1-devServer初探const merge = require("webpack-merge"); const commonConfig = require("./webpack.common.js"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const devConfig = { mode: "development", devtool: "source-map", devServer: { contentBase: "./dist", port: "8080", open: true, hot: true }, plugins: [ // 可以为你生成一个HTML文件 new HtmlWebpackPlugin({ title: "webpack从0到1" }) ] }; module.exports = merge(commonConfig, devConfig); 复制代码
在src/index.js下随便写点工具函数测下吧,然后我们打包npm run dev
本地看看即可。最后我们npm run build
打包准备发布。
然后我们进入扫项目的package.jso
n中,像name
、version
,license
这些东西填得填一下就行。比较需要注意的地方是:版本号每次新发布都需要+1;main
写打包后的文件地址。
发布还是比较简单的,首先你的有一个npmjs的账号,没有的话就先去注册一个吧!
最后我们就可以执行发布命令了。
# 登录 $ npm login # 查看当前镜像源 npm config get registry # 如果是淘宝镜像源,需要设置到官方 $ npm config set registry https://registry.npmjs.org # 发布 $ npm publish --access public # 删除(只能删除24小时内publish的包) $ npm unpublish <name> 复制代码