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

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

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

本篇文章看点:

  1. 教你使用yeoman快速开发自己的脚手架。
  2. 介绍作者编写的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官网

上传成功后会提示:


+ [email protected]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文件中修改配置
  • 如果项目运行正常,会看到如下效果:

阅读原文请点击此处

时间: 09-07

利用yeoman快速搭建React+webpack+es6脚手架的相关文章

react+webpack+ES6搭建项目

react+webpack+ES6打包搭建框架的步骤及部分详解 npm init 此条命令是创建一个npm项目 NPM 全称 node package manager, 是 nodejs 的包管理工具,使用它让我们可以更方便的使用别人的代码,以及向别人分享我们的代码. 执行后,npm会引导输入一些基本信息,可以默认按回车键,然后会生成一个package.json文件,包含基本信息,后续的依赖也会保存到它里边. npm install react react-dom --save 安装react和

scss + react + webpack + es6

scss + react + webpack + es6 写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果:我的github上的 JS代码 或者 观看慕课提供的课程.再趁热打铁加上react React分析 JS实现 对于js来说,下面按钮一点击,就能根据当前的索引为按钮和图片绑定对应好的样式:取到对应的DOM元素,加上定义好的样式名,就能实现绑定效果. React实现 但对于React来说,组件化开发

1分钟利用mysqlreplicate快速搭建MySQL主从

利用mysqlreplicate快速搭建MySQL主从环境 简介 mysql-utilities工具集是一个集中了多种工具的合集,可以理解为是DBA的工具箱,本文介绍利用其中的mysqlreplicate工具来快速搭建MySQL主从环境. HE1:192.168.1.248 slave HE3:192.168.1.250 master 实战 Part1:安装mysql-utilities [[email protected] ~]# tar xvf mysql-utilities-1.5.4.t

利用 TFLearn 快速搭建经典深度学习模型

利用 TFLearn 快速搭建经典深度学习模型 使用 TensorFlow 一个最大的好处是可以用各种运算符(Ops)灵活构建计算图,同时可以支持自定义运算符(见本公众号早期文章<TensorFlow 增加自定义运算符>).由于运算符的粒度较小,在构建深度学习模型时,代码写出来比较冗长,比如实现卷积层:5, 9 这种方式在设计较大模型时会比较麻烦,需要程序员徒手完成各个运算符之间的连接,像一些中间变量的维度变换.运算符参数选项.多个子网络连接处极易发生问题,肉眼检查也很难发现代码中潜伏的 bu

基于requireJS和Gulp可快速搭建前端项目的脚手架

基于requireJS和Gulp可快速搭建前端项目的脚手架. 项目地址 git clone git@github.com:perfectSymphony/Gulp-cli.git 项目目录 ├── README.md # 项目说明 |—— bin # (在gulpfile文件中使用到)解析layout中的模板html,将完整的html产出到src/html中 ├── dist # 打包生成的项目文件 |—— logs # 监听编译less文件时,打印报错信息, ├── gulpfile.js #

使用scss + react + webpack + es6实现幻灯片

写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果:我的github上的 JS代码 或者 观看慕课提供的课程.再趁热打铁加上react React分析 JS实现 对于js来说,下面按钮一点击,就能根据当前的索引为按钮和图片绑定对应好的样式:取到对应的DOM元素,加上定义好的样式名,就能实现绑定效果. React实现 但对于React来说,组件化开发的思想,可不是取得DOM元素就了事,因为React设计的初

利用vagrant快速搭建rails开发环境

前言 当我们学习一门新的语言或技术的时候,最麻烦或比较浪费时间的事情就是搭建开发环境.而搭建开发环境与我们将要学习的新的语言或技术,没有太大的联系,因为我们感兴趣的只是新的语言或技术本身,而并非它们的开发环境.如果浪费太多的时间在这些上面,则更是不值得事情.如果能有一套现成的搭建好的开发环境,这样我们就可以直接关注我们所感兴趣的东西了.如在写某方面教程的时候,如果能配有一个现成的开发环境,这样初学者就可以快速的上手,掌握核心的知识,聚焦重点内容. 本文主要介绍如何利用vagrant快速的搭建ra

[Web 前端] webstorm 快速搭建react项目

cp from : https://blog.csdn.net/qq_39207948/article/details/79467144 前端新手如何安装webstorm ,初步搭建react项目 下载安装webstorm:配置成功: 配置成功后就可以开启webstorm项目了.(存微信收藏..) 1:在webstorm下配置node环境: 2:完成之后: React官方脚手架地址: https://github.com/facebook/create-react-app 在终端下安装执行npm

react + webpack +es6 hello world

1,目录 首先建立package.json文件 { "name": "react-webpack", "version": "1.0.0", "description": "webpack demo", "main": "index.js", "scripts": { "start": "webpa