從零開始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