前言
generator-lego-app 是一个基于 Yeoman 的 npm 包，用于快速搭建基于 React 技术栈的 Web 应用程序。
本文主要介绍如何使用这个 npm 包，以及如何进行一些自定义配置，以满足不同的项目需求。
安装
首先，需要安装 Yeoman：
npm install -g yo
然后，通过 npm 安装 generator-lego-app：
npm install -g generator-lego-app
创建项目
在命令行中输入以下命令：
yo lego-app
然后，会出现如下提示：
? What is your project name? (my-app) ? Please input your project version: (1.0.0) ? Please input your project description: ? What template do you want?
分别选择项目名称、版本号、项目描述和模板类型。
模板类型有四种：SPA、MPA、Admin 和 Basic，分别对应单页面应用、多页面应用、后台管理系统和基础模板。
选择完毕之后，会自动生成项目文件、依赖和一些配置文件。
目录结构
生成的项目目录结构如下：
-- -------------------- ---- ------- ------- --- ----- --- ------- --- ---- - --- ------- - --- ----------- - --- ------ - --- -------- - --- --------- - --- ------ - --- ------ - --- ------ - --- -------- - --- ---------- - --- --------- --- ------------ --- -------- --- ------------- --- ------------ --- ---------- --- ---------
其中，
- dist 目录存放打包后的静态文件
- public 目录存放公共资源文件
- src 目录存放源代码，包括组件、页面、路由、数据接口和工具方法等
- App.js 是应用程序的主组件
- index.js 是应用程序的入口文件
- index.less 是应用程序的样式文件
- routes.js 是应用程序的路由配置文件
定制化配置
在生成项目之后，可以进行一些自定义配置。
CSS 预处理器
generator-lego-app 支持 Less 和 Sass 两种 CSS 预处理器，可以通过参数指定使用哪种预处理器。
yo lego-app --css preprocessor
其中 preprocessor 可以为 less 或 sass。
UI 库
generator-lego-app 默认集成了 antd UI 库，但是也支持在脚手架中使用其他 UI 库，可以通过参数指定所需的 UI 库。
yo lego-app --ui-library library
其中 library 可以为 antd、element、iview 等一些常见的 UI 库。
Redux
generator-lego-app 默认集成了 Redux 状态管理库，但是也支持在脚手架中关闭 Redux，可以通过参数指定是否使用 Redux。
yo lego-app --redux false
其中，false 表示关闭 Redux，true 表示开启 Redux。
Webpack
generator-lego-app 默认集成了 Webpack，但是也支持自定义 Webpack 配置文件，可以通过参数指定自定义的 Webpack 配置文件。
yo lego-app --webpack-config webpack.config.js
其中 webpack.config.js 是自定义的 Webpack 配置文件路径，需要在项目根目录下创建该文件。
示例代码
下面是一个基于 generator-lego-app 创建的基础模板的示例代码：
App.js
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------- - ---- -------------------
------ ------ ---- -----------
------ ---------------
----- --- ------- --------- -
-------- -
------ -
---------------
--------
----------------
--
-
-
------ ------- ----index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();index.less
-- -------------------- ---- ------- ----- ----- ----- - ------- ----- - ---- - ------- -- -------- -- ---------- ----- ------------ ---- ------ ----- ----------------- -------- - ----- - -------- ----- --------------- ------- -
routes.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ------- -------- - ---- -------------------
------ ---- ---- ---------------
------ ----- ---- ----------------
------ -------- ---- -------------------
----- ------ - -
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ ----------- -------------------- --
--------- --------- --
---------
--
------ ------- -------Home.js
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ---- ------- --------- -
-------- -
------ -
--------- ----------
--
-
-
------ ------- -----About.js
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ----- ------- --------- -
-------- -
------ -
---------- ----------
--
-
-
------ ------- ------NotFound.js
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- -------- ------- --------- -
-------- -
------ -
-------- --- -----------
--
-
-
------ ------- ---------总结
本文介绍了如何使用 generator-lego-app 进行快速搭建基于 React 技术栈的 Web 应用程序，并提供了一些定制化配置选项，方便开发者根据自己的项目需求进行选择。
在实践中，需要根据具体项目需求进行一些自定义配置，才能完成更为复杂的开发任务。希望本文能对前端开发者们有所启发和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005577181e8991b448d470e