UDN-企业互联网技术人气社区

板块导航

浏览  : 989
回复  : 2

[React] 使用 gulp,webpack,es6,sass,react 等开发复杂单页面项目

[复制链接]
独领风骚的头像 楼主
发表于 2016-11-4 10:47:29 | 显示全部楼层 |阅读模式
  自从开始放肆的使用 es6 之后就变得一发不可收拾,经手的很多项目也逐渐变成了基于 react.js 单页面项目。中间走了不少弯路,尤其是在各种工具之间的选型和使用上,折腾大半年之后,稍稍记录一下这个过程中使用到的一些东西以及遇到的一些坑。

  0. 初始化项目(npm相关)

  开始之前先简单的介绍一下npm的相关知识,由于现代的项目依赖于各种工具插件,因此一个项目需要一个包管理工具,用来解决各种脚本,包的安装问题,npm最为Node.js的模块依赖管理工具,能很好的解决这些问题。

  开始一个项目,首先要在项目目录里执行下面的命令
  1. $ npm init
复制代码

  npm会问你一些列的问题,包括项目名称,版本描述等,可以详细填写,也可以直接一路回车。执行完成之后,会在当前目录下生成一个文件 package.json ,一个简单的例子如下:
  1. {
  2.   "name": "temp",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "dependencies": {
  7.     "css-loader": "^0.25.0",
  8.     "style-loader": "^0.13.1"
  9.   },
  10.   "devDependencies": {
  11.     "dufing": "^1.0.13"
  12.   },
  13.   "scripts": {
  14.     "test": "echo \"Error: no test specified\" && exit 1",
  15.     "fn": "echo \"123\""
  16.   },
  17.   "author": "",
  18.   "license": "ISC"
  19. }
复制代码

  其中 name , version , description 字段分别表示项目的名称、版本、描述等, main 表示项目的主要入口文件。

  dependencies 和 devDependencies 是我们关注的比较多的,他们分别描述了项目需要依赖的文件。如果我们在项目中安装了相应的依赖同时也希望这个依赖能被记录在 package.json 中,我们就可以执行如下的命令:
  1. # css-loader 会被记录在 dependencies 中
  2. $ npm install css-loader --save
  3. # dufing 会被记录在 devDependencies 中
  4. $ npm install dufing --save-dev
复制代码

  这样,别人拿到一个新的项目,只要有package.json在,运行
  1. $ npm isntall
复制代码

  就会自动安装 dependencies 和 devDependencies 中的依赖。

  有人会问 dependencies 和 devDependencies 会有什么区别呢?其实可以简单的理解成前者是项目运行必备的依赖,后者是开发需要依赖的插件。如果在运行 npm install 加上 --production 字段,系统就会只安装 dependencies 的依赖文件。

  scripts 字段中记录了各种脚本,通过 npm run [name] 就可以执行对应的脚本了,如上 package.json 执行 npm run fn 就会在控制台中输出123。 scripts 看起来简单,实际上如果运用的好的话甚至可以取代gulp等自动化工具,由于这个不是本次的重点,这里不详细说明。

  1. gulp

  1.1 grunt VS gulp VS npm script

  提到前端自动化工具,耳熟能详的就是 grunt ( grunt官网 , grunt中文网 ) 和 gulp ( gulp官网 , gulp中文网 ) 了,它们在前端自动化任务处理方面都是十分优秀的。区别在于,grunt是前端工程化的先驱,偏配置化,可能对于其他语言转入的前端会比较容易上手。gulp属于后来居上型没有那么多的配置,采用了流的方式处理任务,性能更优秀。

  至于到底是使用grunt还是gulp,就要根据自己的实际情况去选择了,但于我而言:

  我是早期的grunt用户,现在的gulp用户,未来的npm script用户。

  之所以提到 npm script 是因为 gulp 和 grunt 有一定的局限性,虽然大多数情况下你都能找到合适的插件,但是也可能某些情况下找不到你想要的插件(怎么办?除非自己写)以及可能出现的Debug等方面的困难。很多情况下你还得去安装gulp或者grunt,但是 npm script 就不一样了,大多数的项目都会有一个package.json,基于这个配置文件,我们可以很轻松的运行npm脚本,最重要的是,它的功能比我们想象的要强大的多,由于 npm script 不是本次讨论的重点,就不多说,放两个链接,感兴趣的童鞋可以查阅一下 [ 《也许你并不需要 Gulp, Grunt ?》 , 《使用npm scripts替代gulp》 ]。

  1.2 gulp的基础配置

  gulp主要是负责各种前端任务的自动执行,比如sass的自动编译、es6的bundle、react的编译、js的压缩,静态文件的版本控制等。

  gulp的安装很简单,首先安装gulp-cli
  1. $ npm install --global gulp-cli
复制代码

  然后,在项目目录里面安装gulp
  1. $ npm install --save-dev gulp
复制代码

  在项目目录里创建gulp的配置文件 gulpfile.js ,具体的内容可以查看官网(或查看下面的实例中的配置)

  最后在项目目录里运行gulp即可
  1. $ gulp
复制代码

  下面以一个真实的项目为例做简要的说明(由于主要是说明整个开发流程,这里略去js压缩,静态文件的版块控制等步骤,着重描述一些比较重要的地方)。

  项目目录如下:
  1. ├── dist
  2. │   ├── css
  3. │   ├── fonts
  4. │   ├── images
  5. │   ├── index.html
  6. │   └── js
  7. ├── gulpfile.js
  8. ├── package.json
  9. └── src
  10.     ├── fonts   // 静态资源
  11.     ├── images    // 静态资源
  12.     ├── index.jsx   // react项目的主要入口
  13.     ├── jsx    // react项目的其他功能模块
  14.     ├── js  // 静态资源
  15.     └── sass  // sass目录
复制代码

  • /src 为开发目录,里面有一些静态文件的目录(fonts,images,js等)
  • /src/jsx 目录为项目所需的react.js项目文件
  • /src/sass 目录为sass文件对应的目录
  • /src/index.jsx 是这个项目的主要入口
  • /dist 为项目的产出目录,所有文件经过处理之后都会放到这个目录里面,由于所有的文件资源都会被打包到这个目录,因此如果涉及到上线等操作的话,直接将这个文件上线即可。

  实际上这个项目要做这么几件事:

  • 处理es6和react的编译
  • 处理sass的编译
  • 处理静态文件的复制(如果有任何变动从src中复制变动到dist中)

  所以,这个项目主要有3个任务:

  • webpack 任务使用 gulp-webpack 处理es6以及react的编译;
  • sass 任务使用 gulp-sass 处理sass资源的编译;
  • static 任务处理静态资源的拷贝等。

  来看一下 gulpfile.js 的内容:
  1. // 引入必要的资源
  2. const gulp = require('gulp');
  3. const webpack = require('gulp-webpack');  // gulp-webpack 用来处理 es6 以及 jsx
  4. const sass = require('gulp-sass');   // gulp-sass 用来处理 sass -> css

  5. // webpack任务,后面会详细介绍,这里略过
  6. gulp.task('webpack', function () {
  7.     return gulp.src('src/**/*.jsx')
  8.         .pipe(webpack({
  9.             watch: true,
  10.             entry: {
  11.                 index: './src/index.jsx'
  12.             },
  13.             output: {
  14.                 filename: './js/[name].js',
  15.                 chunkFilename: './js/[name].chunk.js',
  16.             },
  17.             module: {
  18.                 loaders: [{
  19.                     test: /.jsx?$/,
  20.                     loader: 'babel-loader',
  21.                     query: {
  22.                         compact: false,
  23.                         presets: ['es2015', 'react']
  24.                     }
  25.                 }, {
  26.                     test: /\.scss$/,
  27.                     loaders: ["style", "css", "sass"]
  28.                 }]
  29.             }
  30.         }))
  31.         .pipe(gulp.dest('dist/'));
  32. });

  33. /**
  34.   * sass任务
  35.   * 编译/src/sass目录下所有后缀为.scss的文件,并将编译好的文件放置到/dist/css目录下
  36.   **/
  37. gulp.task('sass', function () {
  38.     return gulp.src('./src/sass/**/*.scss')
  39.         .pipe(sass().on('error', sass.logError))
  40.         .pipe(gulp.dest('./dist/css'));
  41. });

  42. /**
  43.   * static任务
  44.   * 主要负责将静态文件放置到/dist/*目录下
  45.   **/
  46. gulp.task('static', function () {
  47.     gulp.src('./src/fonts/**/*.*')
  48.         .pipe(gulp.dest('./dist/fonts'));
  49.     gulp.src('./src/images/**/*.*')
  50.         .pipe(gulp.dest('./dist/images'));
  51.     gulp.src('./src/page/**/*.*')
  52.         .pipe(gulp.dest('./dist'));
  53. });

  54. /**
  55.   * 把 webpac sass static 任务打包,
  56.   * 这样在执行gulp的时候,就会自动执行webpack,sass,static任务
  57.   */
  58. gulp.task('default', ['webpack', 'sass', 'static'], function () {});

  59. // 监控相应的目录,这样在文件被修改时,gulp会自动执行相应的任务
  60. gulp.watch('src/sass/**/*.scss', ['sass']);
  61. gulp.watch('src/fonts/**/*.*', ['static']);
  62. gulp.watch('src/images/**/*.*', ['static']);
  63. gulp.watch('index.html', ['static']);
复制代码

  2.ES6与Webpack

  随着2015年6月ECMAScript 2015(曾用名:ECMAScript 6、ES6,下文使用ES6)的正式发布,各浏览器对ES6的支持度已经越来越高了,部分开发者已经从小规模使用转到了大规模使用,甚至将此最为新项目的标准。

  在我大规模使用ES6一段时间之后,偶然的一次机会,发现身边有这样的一群人存在,他们认为现在有些浏览器并不能兼容ES6,所以现在了解ES6还为时过早。其实,这些兼容性问题早已经有了成熟的解决方案,最为出名的就是 babel ,关于babel的用法,这里不做过多的赘述,大家可以参考官网的一些说明。

  这里我们使用Webpack来处理前端资源的模块化和打包,那么Webpack是用来干什么的呢?引用《 Webpac中文指南 》里面的一句话:

  Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

  这里我们用webpack处理ES6、ES6模块加载、Reactjs的编译,具体如下:

  2.1 webpack的基础用法

  首先安装 webpack
  1. $ npm install webpack -g
复制代码

  然后在项目目录安装
  1. $ npm install webpack --save-dev
复制代码

  此时就可以使用webpack命令来打包文件了,例如我们有两个文件如下:
  1. // index.js
  2. console.log('hello');
  3. var m = require('./moudle.js');
  4. m();
  5. // moudle.js
  6. module.exports = function(){
  7.     console.log('world')
  8. }
复制代码

  其中index.js是入口文件,module.js是其依赖的其他模块文件,在index中我们引入了module.js的内容。

  接下来开始编译,执行如下命令:
  1. // 以index.js作为入口,打包到bundle.js文件中
  2. $ webpack index.js bundle.js
复制代码

  命令台会打印出如下信息,并产出一个bundle.js的文件,这个就是我们最终打包成功的文件。
  1. Hash: 9f99cbe53612bf1056ab
  2. Version: webpack 2.1.0-beta.25
  3. Time: 62ms
  4.     Asset     Size  Chunks             Chunk Names
  5. bundle.js  2.62 kB       0  [emitted]  main
  6.    [0] ./moudle.js 53 bytes {0} [built]
  7.    [1] ./index.js 59 bytes {0} [built]
复制代码

  此时把bundle.js引入到一个html文件里面,用浏览器打开,在控制台就可以看到输出了hello和world。

  2.2 Webpack的Loader

  Loader可以说是webpack中最为神奇的地方了,他赋予了webpack处理其他类型文件的能力,你可以通过require来处理任何支持类型的模块或者文件,比如jsx, less, sass, 图片等。

  先来个简单的栗子。

  在上一步的目录里我们新建一个css文件
  1. /* style.css */
  2. body { background: red; }
复制代码

  然后修改index.js
  1. // index.js
  2. require('!style!css!./style.css') //用style和css的loader处理css文件

  3. console.log('hello');
  4. var m = require('./moudle.js');
  5. m();
复制代码

  安装loader:
  1. $ npm install css-loader style-loader
复制代码

  重新编译
  1. $ webpack index.js bundle.js
复制代码

  之后把编译好的bundle.js引入到html文件中,并打开,就会发现页面的背景变成了红色。

  细心的童鞋会问 require('!style!css!./style.css') 这样写的话,每次都要写 !style!css! 会不会很麻烦,其实我们还可以将loader写在编译的脚本中:
  1. $ webpack entry.js bundle.js --module-bind "css=style!css"
复制代码

  或者写在webpack的配置中,这样我们在引入对于的文件只要简单的写成下面这样就好了。
  1. require("./style.css")
复制代码

  2.3 在gulp中使用webpack

  正常情况下,我们可以在项目的根目录建立一个 webpack.config.js 的文件,然后把各种配置写在里面,简单的例子如下:
  1. // webpack.config.js

  2. // 引入webpack
  3. var webpack = require('webpack')

  4. module.exports = {
  5.   entry: './index.js',  // 项目的入口文件
  6.   output: {
  7.     filename: 'bundle.js'  // 输出文件
  8.   },
  9.   module: {
  10.     loaders: [
  11.       {test: /\.css$/, loader: 'style!css'}  // 使用的loader
  12.     ]
  13.   }
  14. }
复制代码

  有了配置之后,我们就可以直接在项目目录里面执行下面的脚本,webpack就会按照配置的约定去执行了。
  1. $ webpack
复制代码

  同理在gulp,我们可以继续使用webpack的config文件,也可以在gulp中去写webpack的配置,这里介绍如何在gulp中使用webpack处理es6以及react。

  直接上代码,具体的内容写在注释里面,在执行之前,你可能需要安装下面的包:
  1. # gulp 依赖的bable 和 sass
  2. $ npm install gulp-babel gulp-sass node-sass --save-dev

  3. # bable 的依赖文件
  4. $ npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

  5. # sass 和 css 依赖的文件
  6. $ npm install css-loader style-loader sass-loader --save-dev
复制代码

  具体配置:
  1. // 上下文代码参见1.2中的gulpfile.js,这里只介绍webpack任务
  2. gulp.task('webpack', function () {
  3.      // 处理所有src下面的.jsx文件
  4.     return gulp.src('src/**/*.jsx')
  5.         .pipe(webpack({
  6.             watch: true,   
  7.             entry: {
  8.                 index: './src/index.jsx'  
  9.                 // 入口文件为 src/index.js
  10.             },
  11.             output: {
  12.                 filename: './js/[name].js',  
  13.                 // 输出文件到 js/ 目录下,文件名为jsx文件的前缀+js
  14.                 chunkFilename: './js/[name].chunk.js',
  15.                 // 如果用的require,require中的文件会单独打包成一个文件。
  16.             },
  17.             module: {
  18.                 loaders: [{
  19.                     test: /.jsx?$/,
  20.                     loader: 'babel-loader',  
  21.                     // 使用babel-loader处理jsx文件
  22.                     query: {
  23.                         compact: false,
  24.                         presets: ['es2015', 'react']
  25.                         // 处理es2015和react文件
  26.                     }
  27.                 }, {
  28.                     test: /\.scss$/,
  29.                     loaders: ["style", "css", "sass"]
  30.                     // 处理sass
  31.                 }]
  32.             }
  33.         }))
  34.         .pipe(gulp.dest('dist/'));
  35.         // 编译好的文件放到dist目录下
  36. });
复制代码

  3. Sass

  Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好, 同时也让你能够快速开始小型项目, 特别是在搭配 Compass 样式库一同使用时。

  和Sass同级别的CSS扩展还有 lesscss ,至于那个好用,应该是仁者见仁智者见智的事情,这里不进行讨论。

  3.1 Sass的基础用法

  Sass是基于Ruby的,所以在开始之前必须安装好Ruby,Mac系统大部分是自带Ruby的不用去考虑这个问题,但是对于window用户就得自己去安装了( 安装Ruby )。

  有了Ruby之后我们就可以安装Sass了,只要一条命令就可以搞定了(由于某种众所周知的原因,可能无法访问Ruby的镜像网站,这里可以使用 taobao的Ruby镜像 )
  1. $ gem install sass
复制代码

  安装好了之后,就可以执行 sass -v 查看 sass 的版本,如果需要编译文件就可以执行下面的命令
  1. $ sass test.scss:test.css test1.scss:test1.css --watch
复制代码

  上面的命令表示把test.scss编译成test.css,把test1.scss编译成test1.css, --watch 命令用于监控,如果文件有变化了,sass会自动编译css。

  至于sass的语法什么的这里不准备细聊,可以参考下面的sass相关资源:

  • sass官网
  • sass中文网
  • sass中文文档
  • 3.2 Sass与gulp

  上面说了如何简单的使用sass命令去编译sass文件,但是大多数情况下,我们不可能一一列出所有的sass文件,这时候gulp之类的工具就帮上大忙了。

  下面说实例:

  开始之前,你可能需要安装相应的包:
  1. $ npm install gulp-sass --save-dev
复制代码

  注:如果只使用 gulp-sass ,不用命令行执行sass的话,可以不用安装3.1中的sass
  1. // gulpfile.js
  2. // 具体完全配置看上文这里只介绍sass相关任务的配置

  3. // 引入sass
  4. const sass = require('gulp-sass');

  5. // sass 任务
  6. gulp.task('sass', function () {
  7.     // 把 src/sass目录下的所有scss文件加入到目录中
  8.    return gulp.src('./src/sass/**/*.scss')
  9.            // 用sass去编译scss文件
  10.         .pipe(sass().on('error', sass.logError))
  11.         // 将编译好的文件放置到 dist/css 目录
  12.         .pipe(gulp.dest('./dist/css'));
  13. });
复制代码

  react

  react作为新一代的用于构建用户界面的 JavaScript 库,已经红遍了大江南北,原本计划细说一下react的用法之类的,后来发现,其实只要一本中文文档即可,后续有空,单独和大家分享一下react处理数据流以及使用过程中的一些心得。

相关帖子

发表于 2016-11-17 16:35:28 | 显示全部楼层
js太强大了,好多工作前端都可以做了…
使用道具 举报

回复

发表于 2016-11-17 16:35:30 | 显示全部楼层
js框架越来越火了, 不过本人还是喜欢原生的好, 自己写类库, 自己来封装,用着方便。。。。
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部