使用 webpack 构建 js library

298 阅读1分钟

1. 目标

构建一个简单的日期格式化库

# node 环境使用
const dateFlywen = require("date-flywen");
dateFlywen.format("yyyy-MM-dd hh:mm:ss");    // 2021-02-09 19:02:01
dateFlywen.parse("yyyy/MM/dd hh:mm:ss", "2021/02/09 19:02:01");

# es6 环境使用
import { format, parse } from "date-flywen";
format("yyyy-MM-dd hh:mm:ss");                        // 2021-02-09 19:02:01
parse("yyyy/MM/dd hh:mm:ss", "2021/02/09 19:02:01");

# 浏览器环境使用
<script src="./fly-format.js"></script>
<script>
  window.dateFlywen.format("yyyy-MM-dd hh:mm:ss");    // 2021-02-09 19:02:01
  window.dateFlywen.parse("yyyy/MM/dd hh:mm:ss", "2021/02/09 19:02:01");
</script>

2. 环境搭建

## 1. 初始化工程
npm init -y

## 2. 安装 webpack 依赖
npm install webpack -D

## 3. 创建 src/index.js

## 4. 创建 webpack.config.js
const path = require("path");
module.exports = {  
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "date-flywen.js",
    library: "dateFlywen",
    libraryTarget: "umd",
    globalObject: "this",
    module: false
  },  
  mode: "production"
}

## 5. 修改 package.json
{
  "main": "dist/date-flywen.js",
  "module": "src/index.js",
}

3. 功能实现

## 1. 编辑 src/index.js
import { format } from "core/format";
import { parse } from "core/parse";

function formatFromNumber(number) {
  let date = new Date(number);
  return formatFromObj(date);
}
function formatFromObj(obj) {
  let date = [obj.getFullYear(), obj.getMonth() + 1, obj.getDate()].join("-"),
    time = [obj.getHours(), obj.getMinutes(), obj.getSeconds()].join(":"),
    datetime = [date, time].join(" ");  
  return datetime;
}
function formatDate(obj) {
  if (Object.prototype.toString.call(obj) === "[object Date]") {
    return formatFromObj(obj);
  }  
  if (Object.prototype.toString.call(obj) === "[object Number]") {
    return formatFromNumber(obj);  
  }
}
export { formatDate, format, parse };

4. 发布测试

1. 登录 npm(注意一定是 npm,不是 cnpm 或 tabao)
npm login

2. 测试没写,先放着
...
3. 打包
npm run build

4. 发布
npm publish (每次 publish,一定要修改 package.json 文件的 version 字段)

5. 项目地址

github.com/joinwen/dat…

6. 参考

webpack.js.org/guides/auth…