panda-utils:构建发布一个自己的函数库

如何构建一个libray库？构建完后怎么发布到npm让大家都可以用到？为什么要构建发布一个自己的函数库？本章就是想谈下这些问题。
webpack从0到1
panda-utils

• 为什么要用webpack写一个自己的函数库？因为有一些工具函数平常是用的比较多，每次起一个新的项目都要用到，同样的工具函数老是去找很麻烦，维护一份自己的函数库，能快速的找到api（毕竟自己写的）且更高效的开发业务，何乐而不为？
• 虽然市场有很多牛逼的库比如loadsh、underscore.js等等，公司也有公共的函数库，但是如果你自己上手构建一个自己专属的函数库，用着会更爽，也更香。
• 一方面是为了学习，一方面是为了提高生产。

• 先去github上新建个仓库，在本地上下载打开它并输入命令初始化并安装下webpack。

$ npm init -y
$ npm install webpack webpack-cli --save-dev

• 然后我们在该目录下建几个项目所需的文件：
  1. build文件夹里面放一些webpack相关的配置，因为要区分环境，所以需要拆分成三个文件。–>webpack区分打包development和production
  2. src下新建个index.js放我们的工具函数。

  panda-utils
+ |- build
+   |- webpack.common.js
+   |- webpack.dev.js
+   |- webpack.prod.js
+ |- /src
+   |- index.js
  |- package.json
  |- LICENSE
  |- README.md

• 首先说最重要的，对于要发布一个对外的函数库来说，跟正常的webpack配置的区别就是要配置下output.library相关属性。这部分内容我们需要放到webpack.common.js中：
  1. 首先说下libray，这个就是你设置的一个变量名，它起到一个对外暴露的一个作用。
  2. libraryTarget跟library是相辅相成的，它有几种值，默认是是var，可以设置为window、this之类的，如果你设置为window，那么你引入这个包以后，window.pandaUtils就可以打印出这个对象，大概就是起了这么个作用。
  3. 因为我们这个是需要支持import/require这种模块化引入的，所以需要设置为umd。
  4. 如果你的库还依赖了loadsh之类的库，那么你还需要外部化这个库，就是说在我安装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配置的插件
$ 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

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 login

# 查看当前镜像源
npm config get registry

# 如果是淘宝镜像源，需要设置到官方
$ npm config set registry https://registry.npmjs.org

# 发布
$ npm publish --access public

# 删除（只能删除24小时内publish的包）
$ npm unpublish