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
网友评论