前言
相信很多人都用過create-react-app或者類似的腳手架來快速構建專案，那我們能不能把我們們的專案做成腳手架呢？當然可以
Yeoman
Yeoman是一個強健的工具，庫，及工作流程的組合，幫你網頁開發者快速建立出漂亮而且引人入勝的網頁程式
我們藉助它，就能很容易地開發出自己的腳手架了。
Yeoman官方文件
- 安裝Yeoman
npm install -g yo
複製程式碼- 安裝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 generatorsappindex.js
create generatorsapp emplatesdummyfile.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:mytestyogenerator-zero-react
ode_moduleshusky
> 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_modulesfsevents):
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
複製程式碼- 配置
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!`));
}
};
複製程式碼-
測試
沒有釋出上線的npm包，我們只需要在根目錄執行npm link，然後我們就可以在新檔案中使用yo generator-zero-react構建我們的專案了。 -
zero-react
zero-react是react-architecture為模板倉庫的腳手架。
如何使用呢？
npm install -g yo generator-zero-react
yo zero-react
複製程式碼總結
這篇文章我們搭建了自己的腳手架
我發現react-architecture我們沒有使用redux，下篇文章我們來加入redux。