如何构建一个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和production src
下新建个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);
npm run dev
本地看看即可。最后我们npm run build
打包准备发布。package.jso
n中,像name
、version
,license
这些东西填得填一下就行。比较需要注意的地方是:版本号每次新发布都需要+1;main
写打包后的文件地址。
注意点
# 登录
$ npm login
# 查看当前镜像源
npm config get registry
# 如果是淘宝镜像源,需要设置到官方
$ npm config set registry https://registry.npmjs.org
# 发布
$ npm publish --access public
# 删除(只能删除24小时内publish的包)
$ npm unpublish <name>