什么是 art-generator?
art-generator 是一个前端项目的脚手架工具,它可以帮助前端开发者快速、方便地创建新项目,同时提供了许多自定义的选项和插件来满足不同的需求。art-generator 基于 yeoman-generator 构建,它可以自定义项目的目录结构、构建工具、框架等内容,在前端项目开发中起到了极大的作用。
安装 art-generator
使用 art-generator 需要先安装 npm ,安装 npm 可以参考官网指南,然后使用 npm 安装 art-generator:
npm install -g art-generator
创建一个新项目
使用 art-generator 生成新项目有两种方式,一种是通过命令行交互式地创建,另一种是通过配置文件来创建。下面分别介绍这两种方式。
交互式创建
在命令行中输入以下命令:
yo art-generator
art-generator 会给出一系列的问题,根据需要进行选择和输入。
配置文件创建
在项目根目录下创建一个名为 .yo-rc.json
的文件,文件内容为:
-- -------------------- ---- ------- - ---------------- - ---------- - -------------- ----------------- -------------- ----- -- - ---- ------- --------- -- ---------------- --------- ----- --- ------------------- -- ---------- - -------------- ------------- --------------- - - -
运行命令:
yo art-generator
art-generator 将会读取配置文件,并根据配置文件创建项目。
art-generator 命令
yo art-generator:list
列出 art-generator 支持的所有生成器,例如:
yo art-generator:list
输出:
-- -------------------- ---- ------- ----------------- --------- --- -------- - --- --- ------- -------------------- --------- --- ------ - --- ------ -- -- -------- --- ------- ------------------ --------- --- ------ - --- ---- -- -- -------- ------ ----------------------- --------- --- ------ - --- --------- -- -- -------- ------
yo art-generator:app
创建一个新的 art 项目,例如:
yo art-generator:app
yo art-generator:module
在一个已有的 art 项目中创建一个新的 module,例如:
yo art-generator:module blog
yo art-generator:view
在一个已有的 art module 中创建一个新的 view,例如:
yo art-generator:view blog/list
yo art-generator:component
在一个已有的 art module 中创建一个新的 component,例如:
yo art-generator:component blog/header
art-generator 扩展
art-generator 支持通过插件来对生成器进行扩展,它们的安装方式与普通 npm 包的安装方式相同。例如,要在项目中使用 art-webpack 插件,首先要通过 npm 安装:
npm install --save-dev art-webpack
然后在 .yo-rc.json
配置文件中加入插件:
-- -------------------- ---- ------- - ---------------- - ---------- - -------------- ----------------- -------------- ----- -- - ---- ------- --------- -- ---------------- --------- ----- --- ------------------- -- ---------- - ------------- - - -
保存配置文件后,运行 art-webpack 插件:
yo art-webpack
总结
通过本文的介绍,我们了解了如何使用 art-generator 创建新的前端项目,并且了解了其基本命令以及扩展方式,art-generator 可以帮我们大大减轻新项目的初始化工作,从而更专注于业务的开发实现。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005596a81e8991b448d6eeb