从零开始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