自从前后端开始分离之后,前端项目工程化也显得越来越重要了,之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程,有兴趣的可以点这里去看

但是有些项目可以使用这种方式,但有些却不太适合,或者我们就是想要去尝试新的框架。比如最近我就尝试着使用了webpack+react+es6的方式开发项目,感觉很不错,然后很多项目都用了这种方式。所以为了不需要每次开发的时候都从头开始新建文件,就想着能不能弄个工具,使用命令能够快速的生成这样一套跑的通的项目模版,正好,有个工具叫yeoman

本篇文章看点:

  • 教你使用yeoman快速开发自己的脚手架。

  • 介绍作者编写的generator-reactpackage脚手架模版,此项目的开发基于webpack+react+es6,项目功能包含:

    • 启动本地服务,默认监听端口8888

    • css文件能自动补全css3属性的前缀

    • 包含路由功能(react-router)

    • 使用命令npm run dev启动服务,修改保存文件的时候浏览器会自动刷新(如果不想要实时刷新的功能,将webpack.config.js文件的devServer配置改为inline: false

    • 使用npm run build打包文件,js和css分开打包,并且默认会压缩文件

开发脚手架

环境准备

安装或者更新一下你的node和npm

npm install -g n  //首先安装n模块
n stable //升级node.js到最新稳定版
n 5.0.0 //或者指定版本升级
node -v //检查更新是否成功

然后安装yeoman

npm install -g yo

创建目录

新建一个名为generator-xxx(yeoman脚手架命名规范)的文件夹,我这里叫generator-reactpackage。然后在目录下执行npm init创建package.json文件。修改为:

{
"name": "generator-reactpackage",
"version": "0.0.4",
"description": "基于ract+webpack的项目目录快速生成器",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/luckykun/generator-reactpackage.git"
},
"keywords": [
"yeoman-generator"
],
"author": "luckykun",
"license": "MIT",
"bugs": {
"url": "https://github.com/luckykun/generator-reactpackage/issues"
},
"homepage": "https://github.com/luckykun/generator-reactpackage",
"dependencies": {
"chai": "^3.3.0",
"chalk": "^1.1.1",
"fs-extra": "^0.24.0",
"mocha": "^2.3.3",
"yeoman-generator": "^0.24.1",
"yosay": "^1.0.5"
}
}

注意:package.json的信息一定要尽可能完整,不然可能上传不到generator-lists

然后在此目录下新建generators->app->index.jsgenerators-app-templates,如下图所示:

  • generator-reactpackage是整个npm包的项目文件夹。

  • templates目录里面就是我们最后要用到的项目模版文件,里面的内容是一个完整的前端项目,可以自定义。

  • index.js是开发脚手架的主要逻辑文件。

开始开发

然后编辑index.js文件:

var path = require('path');
var chalk = require('chalk'); //不同颜色的info
var util = require('util');
var yeoman = require('yeoman-generator');
var yosay = require('yosay'); //yeoman弹出框
var path = require('path');
var Reactpackage = yeoman.Base.extend({
info: function() {
this.log(chalk.green(
'I am going to build your app!'
));
},
generateBasic: function() { //按照自己的templates目录自定义
this.directory('src', 'src'); //拷贝目录
this.directory('data', 'data');
this.copy('package.json', 'package.json'); //拷贝文件
this.copy('index.html', 'index.html');
this.copy('README.md', 'README.md');
this.copy('webpack.config.js', 'webpack.config.js');
},
generateClient: function() {
this.sourceRoot(path.join(__dirname, 'templates'));
this.destinationPath('./');
},
install: function() { //安装依赖
this.installDependencies({
skipInstall: this.options['skip-install']
});
},
end: function() {
this.log(yosay(
'Your app has been created successfully!'
));
}
});
module.exports = Reactpackage;

上面这个文件就是主要逻辑部分了。至于具体的语法,可以参考这篇文章。快速搭建基于yeoman快速编写脚手架工具

上传

开发完成之后,我们就可以将generator-reactpackage这个项目上传到npm官网。步骤如下:

npm adduser  //如果没有账号,用此命令注册
npm login //如果有账号,用此命令登陆
npm publish --access=public //上传到npm官网

上传成功后会提示:

+ generator-reactpackage@0.0.4

然后你可以访问http://yeoman.io/generators/这里去搜索一下自己的包,有没有上传成功,比如搜索reactpackage就会出现我上传的脚手架。如下图:

注意:

  • 上传到npm官网之前需要先将脚手架项目上传到github

  • 脚手架项目的package.json文件一定要尽可能详细,比如git主页,readme文件链接等等

如果你能搜到自己上传的脚手架了,OK,开发基于yeoman的脚手架工具就到这里结束了。有兴趣的同学可以去看看我编写的generator-reactpackage源码,喜欢的同学顺便来个star~~哈哈,感谢~

使用脚手架(generator-reactpackage)

首先确保自己安装了nodejs,然后全局安装yeoman

npm install -g yo

然后直接安装脚手架

npm install -g generator-reactpackage

在合适的地方新建一个文件夹,在文件夹下运行:

yo reactpackage

然后就会在此目录下生成以下目录结构:

├── data
│ └── test.json
├── src
│ ├── components
│ │ └── App.js
│ ├── images
│ │ └── yeoman.png
│ ├── styles
│ │ └── app.scss
│ ├── vendor
│ │ └── jquery.js
│ ├── views
│ │ └── home.html
├── node_modules
├── index.html
├── package.json
└── webpack.config.js

细心的同学可能已经发现,其实这里生成的内容就是我们脚手架中定义的templates目录下的内容。

然后使用以下命令:

npm run dev    //项目开发过程使用,启动服务,实时刷新
npm run build //开发完成之后打包文件(js、css分开打包)

注意:

  • 本项目默认监听端口是8888,所以在浏览器输入 http://localhost:8888 就能看到效果了

  • 如果执行上述命令提示错误:Error: getaddrinfo ENOTFOUND localhost,在host文件里面添加127.0.0.1 localhost即可

  • 监听端口和实时刷新的功能都能在webpack.config.js文件中修改配置

  • 如果项目运行正常,会看到如下效果:

结语

可以看到,定义一个自己常用的脚手架骑士挺简单的,还有更多的功能有待探索。generator-reactpackage是一个基于webpack+react+es6开发的项目模版,有需要用到这个模版的同学就赶快安装用起来吧。

另外,它的源码已经上传到github上,喜欢generator-reactpackage的同学顺便给个star,多谢~~~

开发属于自己的yeoman脚手架(generator-reactpackage)的更多相关文章

  1. 前端工程化系列[06]-Yeoman脚手架核心机制

    在前端工程化系列[05] Yeoman脚手架使用入门这边文章中,对Yeoman的使用做了简单的入门介绍,这篇文章我们将接着探讨Yeoman这个脚手架工具内部的核心机制,主要包括以下内容 ❏ Yeoma ...

  2. 前端工程化系列[05] Yeoman脚手架使用入门

    Yeoman是一款流行的前端的脚手架工具. 脚手架工具可以用来快速的自动生成项目的必要文件和基础文件结构.Yeoman使用的内建命令为yo,同时它自己也是一个包管理工具和自动化任务工具,它基于特定的模 ...

  3. [springboot 开发单体web shop] 2. Mybatis Generator 生成common mapper

    Mybatis Generator tool 在我们开启一个新项目的研发后,通常要编写很多的entity/pojo/dto/mapper/dao..., 大多研发兄弟们都会抱怨,为什么我要重复写CRU ...

  4. 利用yeoman快速搭建React+webpack+es6脚手架

    自从前后端开始分离之后,前端项目工程化也显得越来越重要了,之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程,有兴趣的可以点这里去看 但是有些项目可以使用这种方式,但有些 ...

  5. 使用Yeoman快速启动AngularJS项目开发

    本博客停止更新,请访问新个人博客:owenchen.net 前言 博客迁移到了BAE上,http://owenchen.net/,以后的文章会首发在自己的博客上,随后在博客园发布. 很久没有写文章了, ...

  6. 使用Yeoman generator来规范工程的初始化

    前言 随着开发团队不断发展壮大,在人员增加的同时也带来了协作成本的增加:业务项目越来越多,类型也各不相同.常见的类型有基础组件.业务组件.基于React的业务项目.基于Vue的业务项目等等.如果想要对 ...

  7. Yeoman generator

    使用Yeoman generator来规范工程的初始化 前言 随着开发团队不断发展壮大,在人员增加的同时也带来了协作成本的增加:业务项目越来越多,类型也各不相同.常见的类型有基础组件.业务组件.基于R ...

  8. 基于Yeoman实现自定义脚手架

    什么是脚手架? Yeoman是什么? 实现自定义脚手架 基于Yeoman实现Vue-cli 一.什么是脚手架? 手脚架从功能上来讲就是创建项目初始文件,这其中包括生成功能模块配置.自动安装依赖.自动生 ...

  9. 如何学习web开发环境搭建和脚手架

    Web前端的学习路线 第一阶段: HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DO ...

随机推荐

  1. Centos6.5 配置Nginx开机自启动

    1.在/etc/init.d/目录下创建 nginx 文件,内容如下: #!/bin/sh # # nginx - this script starts and stops the nginx dae ...

  2. Linux 权限设置chmod

    Linux中设置权限,一般用chmod命令 1.介绍 权限设置chmod 功能:改变权限命令.常用参数: 1=x(执行权execute) 2=w(写权write) 4=r(读权Read) setuid ...

  3. Apache2.4:AH01630 client denied by server configuration

    问题说明:Apache服务总共有4个,是为了防止单点故障和负载均衡,负载均衡控制由局方的F5提供. 访问的内容在NAS存储上,现象是直接访问每个apache的服务内容都是没有问题,但是从负载地址过来的 ...

  4. 《高性能javascript》一书要点和延伸(上)

    前些天收到了HTML5中国送来的<高性能javascript>一书,便打算将其做为假期消遣,顺便也写篇文章记录下书中一些要点. 个人觉得本书很值得中低级别的前端朋友阅读,会有很多意想不到的 ...

  5. Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用

    概述 上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST API,就能够很容易地构建一个增删查改应用.这个应用始终遗留了一个问题,Web App在访问REST AP ...

  6. 再来说说 LaTeX

    在我的上一篇随笔中,我提到了 Markdown.LaTeX 和 MathJax.这几个东西对目前的网络技术文章的写作.展示都有深远的影响.在上一篇中,我还给出了一份 LaTeX 语法的学习资料.在这一 ...

  7. 设置Fn键 笔记本直接按F1-F12 无须按Fn键 Fn+F12改F12(联想小新300为例)

    最近公司给配的笔记本联想小新300 80RT  i7-6500U 4G内存 500G机械,后加装120G固态+4G内存 这样就感觉还不错了. 在使用这本子的时候,去了Win10,强行装了Win7.无线 ...

  8. 图片放大功能插件及jquery.extend函数理解

    前端时间,产品提出社区评论中的图片需要有放大功能.感觉可以共用,所以就想整合一个插件,过程中也借鉴了一些例子. 分析下自己的代码思路: var scaleImg = function(opts) { ...

  9. dom addeventlistener与id 绑定事件的区别

    文档中有写. //addEventListener() 方法用于向指定元素添加事件句柄. //提示: 使用 removeEventListener() 方法来移除 addEventListener() ...

  10. 用原始方法解析复杂字符串,json一定要用JsonMapper么?

    经常采集数据,肯定会碰到解析字符串,包括整个页面的html,或者json以及一些不标准的json格式... 以前用json序列化,有时候需要实体类,有的时候没有,比较麻烦,听说可以用JsonMappe ...