前端实际项目前端工程

ES6 + Express + Babel + Gulp + R

2016-02-24  本文已影响1657人  SinalVee

自己动手才发现原来写篇好文章真的是太难了，如果评个等级的话，这篇文章大概是渣渣水平，哈哈。
不过，总算是写完了，也算是最近学习的一个总结吧 :)

本文目录

<a id="prepare">

准备工作

作为一个noder，开始一切之前当然少不了npm init
关于express, babel, gulp, webpack, react本文不进行介绍，如有需要可以到其主页自行了解。
Express
Babel
Gulp
React
Webpack

<a id="toc">

项目目录结构

app
├─ lib/
├─ public/
│  ├─ dist/
│  └─ src/
│      └─ index.js
├─ src/
│  └─ app.js
├─ .babelrc
├─ index.html
├─ gulpfile.babel.js
├─ package.json
├─ README.md
└─ webpack.config.js

<a id="express">

Express

<a id="express-install">

安装

这次准备纯手写，所以不用express-generator生成了，简单的示例尽量不使用多余的中间件。
npm install --save express body-parser

<a id="express-server">

写个server测试一下

// src/app.js

var express = require('express');
var bodyParser = require('body-parser');

var app = express();
var router = express.Router();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());

router.get('/', function(req, res, next) {
  res.end('Hello World!');
});

app.use('/', router);

app.listen(3000, function() {
  console.log('server listening at port 3000...');
});

简单起见，404和error handler就不写了。
node src/app.js跑起来，浏览器打开http://localhost:3000，可以看到页面中显示Hello World!了。

<a id="babel">

Babel

babel升级到6.x之后，需要明确指定转换，我们使用预设的es2015。

<a id="babel-install">

安装

npm install -g babel-core
npm install --save-dev babel-core babel-preset-es2015

<a id="babelrc">

配置.babelrc

在根目录新建.babelrc文件，配置如下：

{
  "presets": ["es2015"]
}

<a id="babel-es6">

使用es6语法编写代码

我们现在将之前写过的src/app.js修改为es6语法

// src/app.js

import express, { Router } from 'express';
import bodyParser from 'body-parser';

let app = express();
let router = Router();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());

router.get('/', (req, res, next) => {
  res.end('Hello World!');
});
app.use('/', router);

app.listen(3000, () => {
  console.log('server listening at port 3000...');
});

<a id="babel-transform">

使用bebel转换

将代码修改为es6语法之后，就可以使用babel进行转换了。
使用命令babel src -d lib
可以看到控制台中显示：

src/app.js -> lib/app.js

之后还是运行一下看看效果，浏览器打开http://localhost:3000，我们和熟悉的Hello World又见面啦。

<a id="gulp">

Gulp

每次修改完代码都要重新用babel转换一次是不是很麻烦？别怕，我们有gulp。

<a id="gulp-install">

安装

npm install -g gulp-cli
npm install --save-dev gulp gulp-babel

<a id="gulpfile">

编写gulpfile

在根目录新建一个gulpfile.babel.js文件。
gulp原生并不支持es6语法，但是我们可以告诉gulp使用babel将gulpfile转换为es5，方法就是将gulpfile命名为gulpfile.babel.js

<a id="gulpfile-default">

一个简单的gulpfile

我们先写一个简单的gulpfile测试一下gulp是否能够正常工作。

import gulp from 'gulp';
import babel from 'gulp-babel';

gulp.task('default', () => {
  return gulp.src('src/**/*.js')
    .pipe(babel())
    .pipe(gulp.dest('lib'));
});

控制台执行gulp，可以看到：

[13:00:35] Requiring external module babel-register
[13:00:36] Using gulpfile /path/to/file/gulpfile.babel.js
[13:00:36] Starting 'default'...
[13:00:36] Finished 'default' after 191 ms

然后lib文件夹下就生成了转换后的文件了。

<a id="gulpfile-watch">

能够监听文件更改的gulpfile

虽然上面的gulpfile能够将使用了，但是还是跟之前直接用babel一样，每次都要gulp一下，下面我们就来写一个能够监听文件的gulpfile。当文件被修改之后，自动将文件转换。
这里使用gulp-watch监听文件更改。
npm install --save-dev gulp-watch

import gulp from 'gulp';
import watch from 'gulp-watch';
import babel from 'gulp-babel';

gulp.task('transform', () => {
  return gulp.src('src/**/*.js')
    .pipe(babel())
    .pipe(gulp.dest('lib'));
});

gulp.task('watch', () => {
  return gulp.src('src/**/*.js')
    .pipe(watch('src/**/*.js', {
      verbose: true
    }))
    .pipe(babel())
    .pipe(gulp.dest('lib'));
});

gulp.task('default', () => {
  gulp.start('transform');
});

控制台执行gulp watch

[14:11:46] Requiring external module babel-register
[14:11:47] Using gulpfile /file/to/path/gulpfile.babel.js
[14:11:47] Starting 'watch'...

然后修改app.js并保存，可以看到控制台中多了一行信息

[14:13:20] app.js was changed

对于gulp其他的用法这里就不细说了，有兴趣的可以去看桑大i5ting的Gulp实战和原理解析（以weui作为项目实例）

<a id="react-webpack">

React + Webpack

<a id="react-webpack-install">

安装

react
npm install --save react react-dom
webpack
npm install --save-dev webpack webpack-dev-server
为了编译jsx，我们还需要其他一些模块
npm install --save-dev babel-loader babel-preset-react

<a id="webpack-config">

编写webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  entry: {
    public: './public/src/index'
  },
  output: {
    path: path.join(__dirname, 'public/dist'),
    filename: 'bundle.js',
    publicPath: 'public/dist'
  },
  plugins: [],
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: [path.join(__dirname, 'public/src')],
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  }
};

<a id="gulp-webpack">

在gulp中使用webpack

修改gulpfile.babel.js，添加build和webpack-dev-server任务，分别是生成打包文件和启动开发服务器，并将default修改为同时执行transform和webpack-dev-server。

import gulp from 'gulp';
import gutil from 'gulp-util';
import watch from 'gulp-watch';
import babel from 'gulp-babel';
import webpack from 'webpack';
import WebpackDevServer from 'webpack-dev-server';

import webpackConfig from './webpack.config.js';

// transform
gulp.task('transform', () => {
  return gulp.src('src/**/*.js')
    .pipe(babel())
    .pipe(gulp.dest('lib'));
});

// watch transform
gulp.task('watch-transform', () => {
  return gulp.src('src/**/*.js')
    .pipe(watch('src/**/*.js', {
      verbose: true
    }))
    .pipe(babel())
    .pipe(gulp.dest('lib'));
});

gulp.task('webpack:build', (callback) => {
  // modify some webpack config options
  var myConfig = Object.create(webpackConfig);
  myConfig.plugins = myConfig.plugins.concat(
    new webpack.DefinePlugin({
      'process.env': {
        // This has effect on the react lib size
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin()
  );

  // run webpack
  webpack(myConfig, (err, stats) => {
    if (err)
      throw new gutil.PluginError('webpack:build', err);
    gutil.log('[webpack:build]', stats.toString({
      colors: true
    }));
    callback();
  });
});

gulp.task('webpack-dev-server', (callback) => {
  // modify some webpack config options
  var myConfig = Object.create(webpackConfig);
  myConfig.devtool = 'eval';
  myConfig.debug = true;

  // Start a webpack-dev-server
  new WebpackDevServer(webpack(myConfig), {
    publicPath: '/' + myConfig.output.publicPath,
    stats: {
      colors: true
    }
  }).listen(3001, 'localhost', (err) => {
    if (err) throw new gutil.PluginError('webpack-dev-server', err);
    gutil.log('[webpack-dev-server]', 'http://localhost:3001/');
  });
});

gulp.task('default', ['watch-transform', 'webpack-dev-server']);

<a id="react">

使用React

在根目录下创建index.html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello Wrold</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="http://127.0.0.1:3001/public/dist/bundle.js"></script>
  </body>
</html>

之后在public/src目录创建index.js文件，简单的写个hello world.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  render() {
    return (
      <h1>Hello Wrold!!</h1>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

控制台执行gulp webpack-dev-server，打开http://localhost:3001
我们和Hello world!第三次见面了～

<a id="summary">

总结

到这里文章就结束了，然而这只是文章的结束，现在只是把大体的结构搭建起来了，剩下要做的还有很多，继续加油把～
PS: 我也不知道这种目录结构是否合理，如有不同意见，欢迎拍砖～

上一篇下一篇

猜你喜欢

热点阅读