npm 包 father-build 使用教程

什么是 father-build？

father-build 是一个基于 webpack 的前端构建工具，它可以让我们更方便地搭建 React 和 Vue 等前端项目的开发环境，并且支持输出多种不同的文件格式。

如何安装 father-build？

我们可以使用 npm 来安装 father-build，打开终端并输入以下命令即可：

npm install father-build -g

如何使用 father-build？

初始化一个新项目

1. 在终端中进入你想要初始化的项目目录
2. 输入命令 father init，紧接着输入 y/n 来初始化你想要的不同类型的项目，比如 Vue 项目则输入 y vue 即可

运行项目

1. 在终端中进入项目的根目录
2. 输入命令 npm run start 即可启动项目

打包项目

1. 在终端中进入项目的根目录
2. 输入命令 npm run build 即可打包项目

father-build 的配置项

father-build 提供了丰富的配置项，通过修改这些配置可以让我们更灵活地使用该工具，以下是一些常用的配置项：

lessOptions

该选项用于配置 less 编译器的参数，我们可以在该选项中添加一些 less 参数，比如开启压缩等，具体使用方法如下：

{
  "lessOptions": {
    "compress": true
  }
}

extraBabelPlugins

该选项用于添加额外的 babel 插件，比如使用 decorators 编写 React 组件时需要安装的插件，具体使用方法如下：

{
  "extraBabelPlugins": [
    ["@babel/plugin-proposal-decorators", {"legacy": true}]
  ]
}

externals

该选项用于设置需要排除打包的依赖，比如在使用 React 和 ReactDOM 的情况下，我们可以将它们排除在打包之外，具体使用方法如下：

{
  "externals": {
    "react": "React",
    "react-dom": "ReactDOM"
  }
}

father-build 的高级用法

修改 webpack 配置

father-build 提供了修改 webpack 配置的方法，我们可以通过修改配置来实现更复杂的需求，具体方法如下：

1. 在项目的根目录下创建自定义配置文件 .umirc.js 或者 umi.config.js；
2. 使用 configureWebpack 参数自定义配置，示例如下：

export default {
  configureWebpack: {
    plugins: [new MyWebpackPlugin()]
  }
};

编写插件

father-build 提供了使用插件来修改 webpack 配置的方法，我们可以编写自己的插件来实现更复杂的需求，比如添加自定义组件库等，具体方法如下：

1. 在项目的根目录下创建插件文件 my-plugin.js；
2. 在 my-plugin.js 中编写插件代码，示例如下：

-- -------------------- ---- -------
-------------- - -
  -- ------- ------- ---
  -------------------- - ------- -- -
    -- -- ------- ------ ----- ------------------------
    -------------
      -----------------
      ----------------------------
      -----------------------
      ------------------------------------------------
  --
  -- ----------
  ----------------- -
    ------------------ ------- ---- ----
  --
  -- ----------
  ---------------------- -
    ------------------ --------- ---- --- -------
  -
-

结语

在本文中，我们介绍了 father-build 的使用方法和一些高级用法，可以看到，使用 father-build 可以让我们更方便地搭建前端项目的开发环境，并且通过自定义配置和编写插件来实现更复杂的需求，为我们的开发工作带来很大的便利。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70704