Webpack + Gulp + Babel, No React!

发表于 | 分类于 |

前端自动化构建一直很火热, 各种工具也层出不穷, 开始有点不以为然, 但使用之后发现确实很方便, 也整理出了一套自己感觉不错的搭配组合, 用 Webpack 来处理js, 用 Gulp 来编译与压缩sass, 检查与压缩js, 处理图片等等, 用 Babel 来讲es2015转化为es5. 每次 Babel 与 Webpack 组合时, 网上资料无不扯上 React, 我感觉这一块一直是一个小痛点吧。当然基于 Babel + Webpack + ES6+ 的 React 确实很优雅, 最近正在努力学习, 下一篇博文分享吧。

Webpack

Webpack中文指南 - 可以用来入门

Webpack Demo - 阮一峰老师

Webpack主要特点在于前端资源模块化管理和打包功能, 这样我们就可以像node那样使用模块的方式去书写我们的前端代码了, 使用npm包, 可以将你的js适当模块化分解, 暴露相应接口.

当然先不要忘了全局安装:

1
$ npm install webpack -g

Gulp

利用node流以达到快速构建的目的, 具有众多插件, 可以完成以下自动构建工作:

  • 编译Sass
  • 压缩css
  • 利用eslint检查js
  • 模糊代码
  • 压缩图片
  • 快速清理
  • …

当然先不要忘了全局安装:

1
$ npm install gulp -g

Babel

Babel入门指南 - 阮一峰老师

又要安利一发阮一峰老师了, 阮一峰老师的博文确实简明扼要, 使像我一样的小白菜快速掌握

使用babel后, 就可以肆无忌惮地使用许多es6的特性了, 比如es6的模块加载.

下面以我做的一个很简单的Backbone小项目来说明以下

backbone-clickable-grid

目录结构

1
2
3
4
5
6
7
8
9
10
11
.
    ├── dist                --- 生产环境静态资源
    │    ├── css
    │    ├── js
    ├── src                 --- 本地环境静态资源
    │    ├── js
    │    ├── scss
    ├── .eslintrc           --- eslint配置文件
    ├── webpack.config.js   --- webpack配置文件
    ├── index.html          --- 项目主页
    └── gulpfile.js         --- gulp配置文件

gulp配置

gulp的配置放在gulpfile.js中, 简单介绍一些常用API

  • gulp.src(globs[, options]) - 指明需要处理的源文件路径

  • gulp.dest(path[, options]) - 指明任务处理完成后的输出路径

  • gulp.task(name [, deps, fn]) - 任务注册, 可以顺序执行, 需要添加依赖

  • gulp.watch(glob[, opts], tasks) - 监视文件的变化并运行相应的任务

  • .pipe() - 传递给后续插件

拿以下示例简单说明:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
gulp.task('webpack', function () {
  return gulp.src('./src/js/main.js')
         .pipe(webpack(webpackConfig))
         .pipe(gulp.dest('./dist/js/'));
});
// 在合并，压缩文件前先让webpack处理js文件，然后进行重命名与丑化
gulp.task('scripts', ['webpack'], function() {
    gulp.src('./dist/js/main.js')
        .pipe(rename('main.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'));
});
// 从node_modules中迁出需要的js依赖
gulp.task('buildlib', function(){
    gulp.src('./node_modules/backbone/backbone-min.js')
        .pipe(gulp.dest('./dist/js'));
});
// 监听js文件变化
gulp.watch('./src/js/*.js', function(){
    gulp.run('eslint', 'scripts');
});

webpack配置

webpack的配置放在webpack.config.js中，由于gulp已经处理了大部分，所以webpack的配置就相对简单了

entry: js文件入口, output: 经过处理后的js文件输出

可以多文件输入输出

1
2
3
4
5
6
7
8
9
module.exports = {
  entry: {
    bundle1: './main1.js',
    bundle2: './main2.js'
  },
  output: {
    filename: '[name].js'
  }
};

module: loader用来处理js

可以配合babel使用

1
2
3
4
5
6
7
8
9
10
11
12
module: {
  loaders: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }
  ]
}