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開發(fā)依賴中
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
創(chuàng)建一個weboack配置文件webpack.config.js
module.exports = {
entry: "./entry.js", //打包入口文件
output: {
path: __dirname, //打包后文件的路徑
filename: "bundle.js"http://打包后文件名
},
module: {
loaders: [ //打包所需加載器
{ test: /\.css$/, loader: "style!css" }
]
}
};
配置其實主要是為了簡化執(zhí)行命令解恰，現(xiàn)在執(zhí)行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();//創(chuàng)建一個express實例
app.use(express.static(__dirname + '/')); 設置服務器靜態(tài)根目錄
app.listen(3000,function () { //監(jiān)聽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可以根據(jù)我們所設定的代碼規(guī)范去系統(tǒng)的檢查代碼錯誤
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"
},
執(zhí)行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頁面中增加一個節(jié)點
<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"));
現(xiàn)在去打開localhost:3000,看到了hello world!顯示在了頁面上腐宋，成功啦
github:https://github.com/baiying1314/TWBS
