从零开始React项目架构(六)

前言

---

相信很多人都用过create-react-app或者类似的脚手架来快速构建项目，那我们能不能把咱们的项目做成脚手架呢？当然可以

Yeoman

---

Yeoman是一个强健的工具，库，及工作流程的组合，帮你网页开发者快速创建出漂亮而且引人入胜的网页程序

我们借助它，就能很容易地开发出自己的脚手架了。 Yeoman官方文档

1. 安装Yeoman

npm install -g yo
复制代码

2. 安装generator

npm install -g generator-generator
复制代码

yeoman将根据我们写的generator来执行构建代码。 3. 初始化项目
执行下面命令，执行之前并不需要自己新建文件夹，yo generator会帮助我们建好文件夹

yo generator
复制代码

项目名称自己设置，必须是以generator-开头，协议选择MIT，在设置了一系列问题之后

? Your generator name generator-zero-react
? The name above already exists on npm, choose another? No
Your generator must be inside a folder named generator-zero-react
I'll automatically create this folder.
? Description
? Project homepage url
? Author's Name lemon
? Author's Email 540846207@qq.com
? Author's Homepage
? Package keywords (comma to split)
? Send coverage reports to coveralls Yes
? GitHub username or organization l-Lemon
? Which license do you want to use? MIT
   create package.json
   create README.md
   create .editorconfig
   create .gitattributes
   create .gitignore
   create generators\app\index.js
   create generators\app\templates\dummyfile.txt
   create __tests__\app.js
   create .travis.yml
   create .eslintignore
   create LICENSE


I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.




I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.


npm WARN deprecated istanbul-lib-hook@1.2.1: 1.2.0 should have been a major version bump

> husky@0.14.3 install F:\mytest\yo\generator-zero-react\node_modules\husky
> node ./bin/install.js

husky
setting up Git hooks
done

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 923 packages in 90.431s
Thanks for using Yeoman.
- Enable Travis integration at https://travis-ci.org/profile/l-Lemon
- Enable Coveralls integration at https://coveralls.io/repos/new
复制代码

4. 配置
   generators/app/templates是默认存放文件的目录，把所有模版文件放在这个目录下 generators/app/index.js 是配置文件

'use strict';
const Generator = require('yeoman-generator');
const chalk = require('chalk');
const yosay = require('yosay');

module.exports = class extends Generator {
	prompting() {
		this.log(yosay(`Welcome to the grand ${chalk.red('zero-react-cli')} generator!`));

		const prompts = [
			{
				type: 'input',
				name: 'name',
				message: 'Name of project:',
				default: this.appname
			},
			{
				type: 'input',
				name: 'author',
				message: 'Author:',
				default: this.user.git.name()
			},
			{
				type: 'input',
				name: 'description',
				message: 'Description:',
				default: ''
			},
			{
				type: 'list',
				name: 'projectLicense',
				message: 'Please choose license:',
				choices: ['MIT', 'ISC', 'Apache-2.0', 'AGPL-3.0']
			}
		];

		return this.prompt(prompts).then(props => {
			this.props = props;
		});
	}

	writing() {
		this.fs.copy(this.templatePath(), this.destinationPath(), {
			globOptions: {
				dot: true
			}
		});
		const pkgJson = {
			name: this.props.name,
			author: this.props.author,
			description: this.props.description,
			license: this.props.projectLicense
		};

		this.fs.extendJSON(this.destinationPath('package.json'), pkgJson);
	}

	install() {
		this.installDependencies({
			bower: false,
			npm: true
		});
	}

	end() {
		this.log(chalk.green('Construction completed!'));
	}
};
复制代码

5. 测试
   没有发布上线的npm包，我们只需要在根目录执行npm link，然后我们就可以在新文件中使用yo generator-zero-react构建我们的项目了。

6. zero-react
   zero-react 是react-architecture为模板仓库的脚手架。 如何使用呢？

npm install -g yo generator-zero-react
yo zero-react
复制代码

总结

---

这篇文章我们搭建了自己的脚手架
我发现react-architecture我们没有使用redux，下篇文章我们来加入redux。

系列文章

---

1. 从零开始React项目架构(一)
2. 从零开始React项目架构(二)
3. 从零开始React项目架构(三)
4. 从零开始React项目架构(四)
5. 从零开始React项目架构(五)

源码

---

react-architecture
generator-zero-react