从零开始构建一个工具库

从零开始构建一个工具库

大家在平常的开发中或多或少都使用过一些主流的工具库，例如 Lodash Day.js 等，这些库极大的降低了我们在开发一些项目时的复杂度，加快了我们的开发进度。但是随着时间的增长，我们会积累一些常用的自定义工具函数，如果遇到重复的业务逻辑一般都是在做过的项目里面翻找，然后粘贴复制。聪明一点的会写一些代码片段，然后通过一些效率工具粘贴复制。当然这样做也未尝不可，随着前端工程化水平不断的提高，使用 npm 作为我们项目的包管理工具已经变得很普通了，我们可以考虑写一个自定义的工具库，在方便自己的同时，发布在 npm 上面，也是为社区做出了自己一点点的贡献，那么今天我们就尝试从零开始搭建一个属于自己的前端工具库。

1. 创建项目并初始化

mkdir create-utils-lib
cd create-utils-lib
git init
npm init -y

2. 构建基础框架

我这里是采用了 rollup.js 作为打包工具，相比 webpack 更适合构建工具库，配置也相对简单一点。

npm install --save-dev rollup @rollup/plugin-babel
touch rollup.config.js

打开 rollup.config.js 配置文件，填入以下配置

import { babel } from '@rollup/plugin-babel';

export default {
  input: 'src/main.js',
  output: {
    name: '_',
    file: 'lib/bundle.js',
    format: 'iife',
  },
  plugins: [
    babel({
      babelHelpers: 'bundled',
    }),
  ],
};

使用 Babel 可以将我们的高版本 JavaScript 代码编译成低版本，以便适配更多的浏览器。

npm install --save-dev @babel/core @babel/preset-env
touch babel.config.js

打开 babel.config.js 配置文件，填入以下配置

module.exports = {
  presets: [['@babel/preset-env', { targets: { node: 'current' } }]],
};

默认采用 IIFE 模式，打包后可以直接在浏览器中使用。到这里，一个最基础的库构建应用就搭建好了，我们尝试写一个求和函数来测试一下。

mkdir src
touch main.js

在 main.js 键入以下代码

export function sum(a, b) {
  return a + b;
};

打开 package.json 新增 build 命令

"scripts": {
    "build": "rollup --config"
}

在命令行中执行 npm run build ，通过新建 HTML 文件并加载打包后的文件，就可以直接使用工具库了。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <title>create-utils-lib</title>
</head>

<body>
    <script src="./lib/bundle.js"></script>

    <script>
        console.log(_.sum(1, 2)); // 3
    </script>
</body>

</html>

是不是觉得很简单，当然这只是最基本的工具库应用，并没有考虑代码规范、提交风格、持续集成等因素，下期我们将解决这些问题，使之成为一个健壮的工具库。

Comments

Leave a Comment