前言
相信很多人都用过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 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
- 配置
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。
