[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.replies",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"replies",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":30,"_31":16,"_32":33},"loginname","levi0913","page",1,"limit",50,"total","id","14648","avatar_url","https://avatars.githubusercontent.com/u/7369946?v=2","githubUsername","create_at","2014-10-27 07:59:21.714","score",5,"topic_count",0,"reply_count","is_star",false,{"_20":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":33,"_47":33,"_31":48,"_49":50,"_25":51,"_52":53},"16372","author_id","17949","tab","share","content","自己动手才发现原来写篇好文章真的是太难了，如果评个等级的话，这篇文章大概是渣渣水平，哈哈。\r\n不过，总算是写完了，也算是最近学习的一个总结吧 :)\r\n\r\n## 本文目录\r\n* 准备工作\r\n* 项目目录结构\r\n* Express\r\n * 安装\r\n * 写个server测试一下\r\n* Babel\r\n * 安装\r\n * 配置.babelrc\r\n * 使用es6语法编写代码\r\n * 使用bebel转换\r\n* Gulp\r\n * 安装\r\n * 编写gulpfile\r\n * 一个简单的gulpfile\r\n * 能够监听文件更改的gulpfile\r\n* React + Webpack\r\n * 安装\r\n * 编写webpack.config.js\r\n * 在gulp中使用webpack\r\n * 使用React\r\n* 总结\r\n\r\n## 准备工作\r\n作为一个noder，开始一切之前当然少不了`npm init`\r\n关于express, babel, gulp, webpack, react本文不进行介绍，如有需要可以到其主页自行了解。\r\n[Express](http://expressjs.com/)\r\n[Babel](https://babeljs.io/)\r\n[Gulp](http://gulpjs.com/)\r\n[React](https://facebook.github.io/react/)\r\n[Webpack](https://webpack.github.io/)\r\n\r\n## 项目目录结构\r\n```\r\napp\r\n├─ lib/\r\n├─ public/\r\n│ ├─ dist/\r\n│ └─ src/\r\n│ └─ index.js\r\n├─ src/\r\n│ └─ app.js\r\n├─ .babelrc\r\n├─ index.html\r\n├─ gulpfile.babel.js\r\n├─ package.json\r\n├─ README.md\r\n└─ webpack.config.js\r\n```\r\n\r\n## Express\r\n\r\n### 安装\r\n这次准备纯手写，所以不用`express-generator`生成了，简单的示例尽量不使用多余的中间件。\r\n`npm install --save express body-parser`\r\n\r\n### 写个server测试一下\r\n```\r\n// src/app.js\r\n\r\nvar express = require('express');\r\nvar bodyParser = require('body-parser');\r\n\r\nvar app = express();\r\nvar router = express.Router();\r\n\r\napp.use(bodyParser.json());\r\napp.use(bodyParser.urlencoded({ extended: true }));\r\napp.use(cookieParser());\r\n\r\nrouter.get('/', function(req, res, next) {\r\n res.end('Hello World!');\r\n});\r\n\r\napp.use('/', router);\r\n\r\napp.listen(3000, function() {\r\n console.log('server listening at port 3000...');\r\n});\r\n```\r\n简单起见，404和error handler就不写了。\r\n`node src/app.js`跑起来，浏览器打开[http://localhost:3000](http://localhost:3000)，可以看到页面中显示`Hello World!`了。\r\n\r\n## Babel\r\nbabel升级到6.x之后，需要明确指定转换，我们使用预设的es2015。\r\n\r\n### 安装\r\n`npm install -g babel-core`\r\n`npm install --save-dev babel-core babel-preset-es2015`\r\n\r\n### 配置.babelrc\r\n在根目录新建.babelrc文件，配置如下：\r\n```\r\n{\r\n \"presets\": [\"es2015\"]\r\n}\r\n```\r\n\r\n### 使用es6语法编写代码\r\n我们现在将之前写过的`src/app.js`修改为es6语法\r\n```\r\n// src/app.js\r\n\r\nimport express, { Router } from 'express';\r\nimport bodyParser from 'body-parser';\r\n\r\nlet app = express();\r\nlet router = Router();\r\n\r\napp.use(bodyParser.json());\r\napp.use(bodyParser.urlencoded({ extended: true }));\r\napp.use(cookieParser());\r\n\r\nrouter.get('/', (req, res, next) => {\r\n res.end('Hello World!');\r\n});\r\napp.use('/', router);\r\n\r\napp.listen(3000, () => {\r\n console.log('server listening at port 3000...');\r\n});\r\n```\r\n\r\n### 使用bebel转换\r\n将代码修改为es6语法之后，就可以使用babel进行转换了。\r\n使用命令`babel src -d lib`\r\n可以看到控制台中显示：\r\n```\r\nsrc/app.js -> lib/app.js\r\n```\r\n之后还是运行一下看看效果，浏览器打开[http://localhost:3000](http://localhost:3000)，我们和熟悉的`Hello World`又见面啦。\r\n\r\n## Gulp\r\n每次修改完代码都要重新用babel转换一次是不是很麻烦？别怕，我们有gulp。\r\n\r\n### 安装\r\n```\r\nnpm install -g gulp-cli\r\nnpm install --save-dev gulp gulp-babel\r\n```\r\n\r\n### 编写gulpfile\r\n在根目录新建一个gulpfile.babel.js文件。\r\ngulp原生并不支持es6语法，但是我们可以告诉gulp使用babel将gulpfile转换为es5，方法就是将gulpfile命名为gulpfile.babel.js\r\n\r\n#### 一个简单的gulpfile\r\n我们先写一个简单的gulpfile测试一下gulp是否能够正常工作。\r\n```\r\nimport gulp from 'gulp';\r\nimport babel from 'gulp-babel';\r\n\r\ngulp.task('default', () => {\r\n return gulp.src('src/**/*.js')\r\n .pipe(babel())\r\n .pipe(gulp.dest('lib'));\r\n});\r\n```\r\n控制台执行`gulp`，可以看到：\r\n```\r\n[13:00:35] Requiring external module babel-register\r\n[13:00:36] Using gulpfile /path/to/file/gulpfile.babel.js\r\n[13:00:36] Starting 'default'...\r\n[13:00:36] Finished 'default' after 191 ms\r\n```\r\n然后lib文件夹下就生成了转换后的文件了。\r\n\r\n#### 能够监听文件更改的gulpfile\r\n虽然上面的gulpfile能够将使用了，但是还是跟之前直接用babel一样，每次都要gulp一下，下面我们就来写一个能够监听文件的gulpfile。当文件被修改之后，自动将文件转换。\r\n这里使用`gulp-watch`监听文件更改。\r\n`npm install --save-dev gulp-watch`\r\n```\r\nimport gulp from 'gulp';\r\nimport watch from 'gulp-watch';\r\nimport babel from 'gulp-babel';\r\n\r\ngulp.task('transform', () => {\r\n return gulp.src('src/**/*.js')\r\n .pipe(babel())\r\n .pipe(gulp.dest('lib'));\r\n});\r\n\r\ngulp.task('watch', () => {\r\n return gulp.src('src/**/*.js')\r\n .pipe(watch('src/**/*.js', {\r\n verbose: true\r\n }))\r\n .pipe(babel())\r\n .pipe(gulp.dest('lib'));\r\n});\r\n\r\ngulp.task('default', () => {\r\n gulp.start('transform');\r\n});\r\n```\r\n控制台执行`gulp watch`\r\n```\r\n[14:11:46] Requiring external module babel-register\r\n[14:11:47] Using gulpfile /file/to/path/gulpfile.babel.js\r\n[14:11:47] Starting 'watch'...\r\n```\r\n然后修改app.js并保存，可以看到控制台中多了一行信息\r\n```\r\n[14:13:20] app.js was changed\r\n```\r\n对于gulp其他的用法这里就不细说了，有兴趣的可以去看桑大`i5ting`的[Gulp实战和原理解析（以weui作为项目实例）](http://i5ting.github.io/stuq-gulp/)\r\n\r\n## React + Webpack\r\n\r\n### 安装\r\nreact\r\n`npm install --save react react-dom`\r\nwebpack\r\n`npm install --save-dev webpack webpack-dev-server`\r\n为了编译jsx，我们还需要其他一些模块\r\n`npm install --save-dev babel-loader babel-preset-react`\r\n\r\n### 编写webpack.config.js\r\n```\r\nvar path = require('path');\r\nvar webpack = require('webpack');\r\n\r\nmodule.exports = {\r\n devtool: 'eval',\r\n entry: {\r\n public: './public/src/index'\r\n },\r\n output: {\r\n path: path.join(__dirname, 'public/dist'),\r\n filename: 'bundle.js',\r\n publicPath: 'public/dist'\r\n },\r\n plugins: [],\r\n module: {\r\n loaders: [\r\n {\r\n test: /\\.js$/,\r\n include: [path.join(__dirname, 'public/src')],\r\n loader: 'babel',\r\n query: {\r\n presets: ['react', 'es2015']\r\n }\r\n }\r\n ]\r\n }\r\n};\r\n\r\n```\r\n\r\n### 在gulp中使用webpack\r\n修改`gulpfile.babel.js`，添加`build`和`webpack-dev-server`任务，分别是生成打包文件和启动开发服务器，并将`default`修改为同时执行`transform`和`webpack-dev-server`。\r\n```\r\nimport gulp from 'gulp';\r\nimport gutil from 'gulp-util';\r\nimport watch from 'gulp-watch';\r\nimport babel from 'gulp-babel';\r\nimport webpack from 'webpack';\r\nimport WebpackDevServer from 'webpack-dev-server';\r\n\r\nimport webpackConfig from './webpack.config.js';\r\n\r\n// transform\r\ngulp.task('transform', () => {\r\n return gulp.src('src/**/*.js')\r\n .pipe(babel())\r\n .pipe(gulp.dest('lib'));\r\n});\r\n\r\n// watch transform\r\ngulp.task('watch-transform', () => {\r\n return gulp.src('src/**/*.js')\r\n .pipe(watch('src/**/*.js', {\r\n verbose: true\r\n }))\r\n .pipe(babel())\r\n .pipe(gulp.dest('lib'));\r\n});\r\n\r\ngulp.task('webpack:build', (callback) => {\r\n // modify some webpack config options\r\n var myConfig = Object.create(webpackConfig);\r\n myConfig.plugins = myConfig.plugins.concat(\r\n new webpack.DefinePlugin({\r\n 'process.env': {\r\n // This has effect on the react lib size\r\n 'NODE_ENV': JSON.stringify('production')\r\n }\r\n }),\r\n new webpack.optimize.DedupePlugin(),\r\n new webpack.optimize.UglifyJsPlugin()\r\n );\r\n\r\n // run webpack\r\n webpack(myConfig, (err, stats) => {\r\n if (err)\r\n throw new gutil.PluginError('webpack:build', err);\r\n gutil.log('[webpack:build]', stats.toString({\r\n colors: true\r\n }));\r\n callback();\r\n });\r\n});\r\n\r\ngulp.task('webpack-dev-server', (callback) => {\r\n // modify some webpack config options\r\n var myConfig = Object.create(webpackConfig);\r\n myConfig.devtool = 'eval';\r\n myConfig.debug = true;\r\n\r\n // Start a webpack-dev-server\r\n new WebpackDevServer(webpack(myConfig), {\r\n publicPath: '/' + myConfig.output.publicPath,\r\n stats: {\r\n colors: true\r\n }\r\n }).listen(3001, 'localhost', (err) => {\r\n if (err) throw new gutil.PluginError('webpack-dev-server', err);\r\n gutil.log('[webpack-dev-server]', 'http://localhost:3001/');\r\n });\r\n});\r\n\r\ngulp.task('default', ['watch-transform', 'webpack-dev-server']);\r\n```\r\n\r\n### 使用React\r\n在根目录下创建`index.html`文件\r\n```\r\n\r\n\r\n \r\n \r\n Hello Wrold\r\n \r\n \r\n

\r\n \r\n \r\n\r\n```\r\n之后在`public/src`目录创建`index.js`文件，简单的写个hello world.\r\n```\r\nimport React, { Component } from 'react';\r\nimport ReactDOM from 'react-dom';\r\n\r\nclass App extends Component {\r\n render() {\r\n return (\r\n

Hello Wrold!!

\r\n );\r\n }\r\n}\r\n\r\nReactDOM.render(\r\n ,\r\n document.getElementById('root')\r\n);\r\n```\r\n控制台执行`gulp webpack-dev-server`，打开[http://localhost:3001](http://localhost:3001/)\r\n我们和`Hello world!`第三次见面了～\r\n\r\n## 总结\r\n到这里文章就结束了，然而这只是文章的结束，现在只是把大体的结构搭建起来了，剩下要做的还有很多，继续加油把～\r\nPS: 我也不知道这种目录结构是否合理，如有不同意见，欢迎拍砖～","title","【乱炖】ES6 + Express + Babel + Gulp + React + Webpack","last_reply_at","2016-09-02 06:01:53.963","good","top",15,"visit_count",19929,"2016-02-24 10:31:17.229","author",{"_13":54,"_22":55},"SinalVee","https://avatars3.githubusercontent.com/u/3654490?v=4"]