npm 包 jsbuild-core 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，构建工具是必不可少的一部分。然而，每个项目的构建方式都有所不同，所以很多时候需要我们自己编写构建脚本。而在编写构建脚本时，我们会面临一些问题，比如如何管理依赖，如何编写可复用的代码等等。

针对这些问题，我们可以使用 npm 包 jsbuild-core 来简化构建脚本的编写。jsbuild-core 是一个提供了一些基础组件和工具函数的构建库，我们可以通过组合这些基础组件和工具函数来构建自己的脚本。在这篇文章中，我会详细介绍如何使用 jsbuild-core 来编写自己的构建脚本。

安装

安装 jsbuild-core 很简单，只需要在终端中输入以下命令即可：

npm install --save-dev jsbuild-core

使用

添加配置文件

在使用 jsbuild-core 之前，我们需要在项目根目录下添加一个名为 jsbuild.config.js 的配置文件。这个配置文件里面需要返回一个对象，这个对象会作为 jsbuild-core 的配置项。下面是一个简单的示例：

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

src：源代码目录
out：输出目录
tasks：任务列表

在这个示例中，我们定义了一个名为 copyStaticAssets 的任务。这个任务会将 ./src/assets 目录下的所有图片文件复制到 ./dist/assets 目录下。下面我们将对这个任务进行详细介绍。

编写任务

使用 jsbuild-core 编写任务非常简单，只需要定义一个包含 name、pattern、src 和 dest 属性的对象即可。下面是这些属性的作用：

name：任务的名称
pattern：需要处理的文件匹配模式
src：要处理的文件的源目录
dest：处理后的文件的输出目录

我们来看一个示例任务的代码：

module.exports = {
  name: 'copyStaticAssets',
  pattern: ['**/*.{png,jpg,jpeg,gif}'],
  src: './src/assets',
  dest: './dist/assets',
};

这个任务会将 ./src/assets 目录下的所有图片文件复制到 ./dist/assets 目录下。

除了复制静态资源，jsbuild-core 还提供了很多其他的任务，比如编译 CSS、JS、HTML、处理图片等等。下面是一些常用的任务：

compileJS：编译 JS
compileCSS：编译 CSS
compileHTML：编译 HTML
imagemin：压缩图片

这些任务的配置方式和上面介绍的任务相同，只需要根据任务的需要修改相应的属性即可。

运行任务

运行 jsbuild-core 的任务非常简单，只需要在终端中输入以下命令：

jsbuild

这个命令会自动执行 jsbuild.config.js 文件中定义的任务列表。

如果只需要执行单个任务，则需要在命令后面加上任务名称：

jsbuild copyStaticAssets

这个命令会只执行名为 copyStaticAssets 的任务，而不会执行其他的任务。

示例

下面是一个完整的示例代码，它将会：

将 ./src/assets 目录下的所有图片文件复制到 ./dist/assets 目录下；
编译 ./src/js 目录下的所有 JS 文件，将编译后的文件输出到 ./dist 目录下；
编译 ./src/scss/index.scss 文件，将编译后的 CSS 文件输出到 ./dist 目录下；
压缩 ./src/images 目录下的所有图片文件，将压缩后的文件输出到 ./dist/images 目录下。

jsbuild.config.js 文件内容：

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

./src/scss/index.scss 文件内容：

body {
  background: #f0f0f0;
  font-size: 14px;
}

在终端中输入以下命令即可执行任务：

jsbuild

总结

jsbuild-core 为我们提供了一个简单、灵活的构建库，可以帮助我们轻松构建自定义的构建任务。虽然 jsbuild-core 还有一些缺点，比如文档不够完善、插件库不够丰富、社区支持不够活跃等，但是它的优点也很明显，比如易用性强、灵活性高、可扩展性好等。如果你正在寻找一款简单、灵活的构建库，那么不妨考虑一下 jsbuild-core。

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