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

时间:2022-09-12 17:22:41

自从前后端开始分离之后,前端项目工程化也显得越来越重要了,之前写过一篇搭建基于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,如下图所示:

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

  • 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就会出现我上传的脚手架。如下图:

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

注意:

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

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

阅读原文请点击此处

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

  1. Reactjs-generator-cli 一款基于Ink构建用于快速搭建React应用的CLI scaffolding工具

    Reactjs-generator-cli 一款基于Ink构建用于快速搭建React应用的CLI scaffolding工具 A simple CLI for scaffolding React.js ...

  2. scss + react + webpack + es6

    scss + react + webpack + es6 写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果 ...

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

      利用 TFLearn 快速搭建经典深度学习模型 使用 TensorFlow 一个最大的好处是可以用各种运算符(Ops)灵活构建计算图,同时可以支持自定义运算符(见本公众号早期文章<Tenso ...

  4. 使用脚手架快速搭建React项目

    create-react-app是Facebook官方推出的脚手架,基本可以零配置搭建基于webpack的React开发环境步骤: 打开控制台 进入你想要创建项目的目录文件下面 依次执行以下命令 np ...

  5. 快速搭建react项目骨架(按需加载、redux、axios、项目级目录等等)

    一.前言 最近整理了一下项目骨架,顺便自定义了一个脚手架,方便日后使用.我会从头开始,步骤一步步写明白,如果还有不清楚的可以评论区留言.先大致介绍一下这个骨架,我们采用 create-react-ap ...

  6. 真刀实战地搭建React&plus;Webpack&plus;Express搭建一个简易聊天室

    一.前面bb两句 因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉.想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈.好了,可以停止bb了,说一下干货. 二. 这个项目能学到啥? ...

  7. &lbrack;Web 前端&rsqb; webstorm 快速搭建react项目

    cp from : https://blog.csdn.net/qq_39207948/article/details/79467144 前端新手如何安装webstorm ,初步搭建react项目 下 ...

  8. 使用scss &plus; react &plus; webpack &plus; es6实现幻灯片

    写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果:我的github上的 JS代码 或者 观看慕课提供的课程 ...

  9. 利用Bootstrap快速搭建个人响应式主页(附演示&plus;源码)

    1.前言 我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意.做网站后台的开发人员可能了解前端,可是自己写一个不错的前端还是很费事的.幸好我们有Bootstra ...

随机推荐

  1. git 常用命令总结。

    引用:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137396284551 ...

  2. IE6 7 父级元素的overflow&colon;hidden 是包不住子级的relative

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. hibernate 插入数据时让数据库默认值生效

    用hibernate做数据库插入操作时,在数据库端已经设置了对应列的默认值,但插入的数据一直为null.查找资料发现,原来是hibernate的配置项在作怪. Hibernate允许我们在映射文件里控 ...

  4. CSS学习(一)

    /*</br> * color</br> * background-color background-image background-repeat background-po ...

  5. 关于gcd的四道题

    T1:bzoj2705 题目描述: 给定一个n求\(\sum\limits_{i=1}^ngcd(i,n)\) 因为n太大,所以O(n)的做法肯定不行,然后就去想根号的方法. \[\sum\limit ...

  6. array中key所对应的value

    获取数组中的键对应的值 class Test{ public function index(){ $info = array( 'name' => 'daicr', 'age' => 24 ...

  7. bat获取文件夹里面所有文件夹的名称方法

    创建一个123.txt文档,修改名称为123.bat 里面填写内容如下: DIR *.*  /B >文件名清单.TXT 保存,双击执行即可获取生成文件夹名称的txt文档

  8. SE Springer小组之《Spring音乐播放器》需求分析说明书一

    软件需求说明书 软件需求说明书的编制是为了使用户和软件开发者双方对该软件的初始规定有一个共同的理解, 使之成为整个开发工作的基础. 1 引言 1.1编写目的 使用户对该软件的初始规定有一个理解,也使软 ...

  9. 网络工程实训&lowbar;4RIP路由(动态路由)

    实验4:RIP路由.包括RIPv1:RIPv2 动态路由协议包括距离向量路由协议和链路状态路由协议.RIP(Routing Information Protocol,路由信息协议)是使用最广泛的距离向 ...

  10. STM32 HAL库学习系列第6篇---定时器TIM 级联配置

    应用情景 使用定时器配置编码器模式,发现STM32只有两个定时器是32位,16位的测量值不够用,发现是可以使用两个16位定时器级联为32位的. 我是在使用编码器计数电机转速时使用,但是最终实现的效果不 ...