基于React+Express+Webpack的项目框架

step1:建一个文件夹来放这个项目

   mkdir twbs-project
   cd twbs-project

step2:初始化一个.git文件

git init

step3:初始化一个package.json文件

npm init

step4:安装配置打包工具webpack

npm install webpack --save-dev //安装webpack并写入package.json开发依赖中

gi node,ubuntu,WebStorm >> .gitignore //配置.gitignore文件，将不需提交的文件都手动写入.gitignore

如果运行后提示gi不存在
zsh下:

$ echo "function gi() { curl -L -s [https://www.gitignore.io/api/\$@](https://www.gitignore.io/api//$@) ;}" >> ~/.zshrc && source ~/.zshrc

bash下:

 $ echo "function gi() { curl -L -s [https://www.gitignore.io/api/\$@](https://www.gitignore.io/api//$@);}" >> ~/.bashrc && source ~/.bashrc

测试webpack

一个入口文件

//entry.js
document.write("hello world");

一个html文件导入打包后的文件

//index.html
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

运行webpack ./entry.js bundle.js
你会看到项目下多了bundle.js,里边有好多代码，这就是webpack打包后的代码
打开index.html,看到页面显示了hello world，说明webpack打包成功

配置webpack

创建一个weboack配置文件webpack.config.js

module.exports = {
    entry: "./entry.js",　//打包入口文件
    output: {
        path: __dirname,　//打包后文件的路径
        filename: "bundle.js"//打包后文件名
    },
    module: {
        loaders: [　//打包所需加载器
            { test: /\.css$/, loader: "style!css" }　
        ]
    }
};

配置其实主要是为了简化执行命令，现在执行webpack就可以完成打包，我们看到还可以打包css样式，那就试试咯先安装所需加载器
npm install css-loader style-loader
在入口文件处作修改

//entry.js
require("!style-loader!css-loader!./style.css");
document.write("hello world");

增加一个css样式文件

//style.css
body{
background:red;
}

再次打包，打开index.html,会看到背景颜色

step5:配置express

npm install express --save //安装express
建一个server.js启动服务器

//server.js
let express = require("express"); //导入express
let app = express();//创建一个express实例
app.use(express.static(__dirname + '/'));　设置服务器静态根目录
app.listen(3000,function () {　//监听localhost:3000端口
    console.log("listen 3000!!");
})

运行：

webpack //打包
node server.js　//启动服务器

打开localhost:3000,看到hello world!
每次修改完去启动太麻烦，我们设置自动打包，自启动
npm install nodemon //安装nodemon进行自启动

//package.json配置如下
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "nodemon server.js",
  "webpack": "webpack -d --watch"
},

step6:配置eslint

eslint可以根据我们所设定的代码规范去系统的检查代码错误

npm install -g eslint　//全局安装eslint
eslint init //初始化一个.eslintrc.js文件

去package.json中配置

//package.json
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon server.js",
    "eslint": "eslint .",
    "webpack": "webpack -d --watch"
  },

执行npm run eslint看看代码中的问题吧

step7:配置babel来解析react和ES6代码

npm install babel-core
npm install babel-loader
npm install  babel-preset-es2015
npm install babel-preset-react

webpack.config.js中配置如下

module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: ['react', 'es2015']
                }
            },
            {test: /\.png$/, loader: "file-loader"},
            {test: /\.jpg$/, loader: "file-loader"},
        ]
    }

然后我们就可以放心地写es6以及jsx语法啦

step8:加入React

就写个小组建显示个hello world 吧

npm install react --save
npm install react-dom --save

写一个组件App.js

import React,{Component} from "react";

 class App extends Component{
    render(){
        return <div>hello world!</div>
    }
}
module.exports = App;

在index.html页面中增加一个节点
<div id = "app"></div>
注意要放在引入bundle.js之前
修改entry.js

require("!style-loader!css-loader!./style.css");
import {render} from "react-dom";
import React from "react"

import App from "./js/App";

render(<App />,document.getElementById("app"));

现在去打开localhost:3000,看到了hello world!显示在了页面上，成功啦
github:https://github.com/baiying1314/TWBS