npm 包 art-generator 使用教程

阅读时长 4 分钟读完

什么是 art-generator?

art-generator 是一个前端项目的脚手架工具,它可以帮助前端开发者快速、方便地创建新项目,同时提供了许多自定义的选项和插件来满足不同的需求。art-generator 基于 yeoman-generator 构建,它可以自定义项目的目录结构、构建工具、框架等内容,在前端项目开发中起到了极大的作用。

安装 art-generator

使用 art-generator 需要先安装 npm ,安装 npm 可以参考官网指南,然后使用 npm 安装 art-generator:

创建一个新项目

使用 art-generator 生成新项目有两种方式,一种是通过命令行交互式地创建,另一种是通过配置文件来创建。下面分别介绍这两种方式。

交互式创建

在命令行中输入以下命令:

art-generator 会给出一系列的问题,根据需要进行选择和输入。

配置文件创建

在项目根目录下创建一个名为 .yo-rc.json 的文件,文件内容为:

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

运行命令:

art-generator 将会读取配置文件,并根据配置文件创建项目。

art-generator 命令

yo art-generator:list

列出 art-generator 支持的所有生成器,例如:

输出:

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

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

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

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

yo art-generator:app

创建一个新的 art 项目,例如:

yo art-generator:module

在一个已有的 art 项目中创建一个新的 module,例如:

yo art-generator:view

在一个已有的 art module 中创建一个新的 view,例如:

yo art-generator:component

在一个已有的 art module 中创建一个新的 component,例如:

art-generator 扩展

art-generator 支持通过插件来对生成器进行扩展,它们的安装方式与普通 npm 包的安装方式相同。例如,要在项目中使用 art-webpack 插件,首先要通过 npm 安装:

然后在 .yo-rc.json 配置文件中加入插件:

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

保存配置文件后,运行 art-webpack 插件:

总结

通过本文的介绍,我们了解了如何使用 art-generator 创建新的前端项目,并且了解了其基本命令以及扩展方式,art-generator 可以帮我们大大减轻新项目的初始化工作,从而更专注于业务的开发实现。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005596a81e8991b448d6eeb

纠错
反馈