安裝NPM和Node.js
安裝完以后就會(huì)有最新版的Node.js和NPM
創(chuàng)建App目錄
npm init
生成的package.json 里辜限，** scripts** 最重要抡四，這里定義的參數(shù)會(huì)在** npm run **的時(shí)候進(jìn)行調(diào)用逊脯。
具體指南：阮一峰——npm scripts使用指南
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval-source-map --progress --host 192.168.20.6 --colors --hot --content-base ./build --module-bind 'css=style!css' "
},
- --host 192.168.20.6 寝姿，用于 webpack server 時(shí)所用的地址
- --hot 熱更新
安裝webpack
app根目錄下創(chuàng)建 webpack.config.js
npm install webpack --save-dev
--save-dev 保存到當(dāng)前文件夾
webpack作用
- 打包應(yīng)用
- 打包壓縮靜態(tài)文件（css,jsx)
- 熱更新
安裝 webpack-dev-server 熱更新服務(wù)器
npm install --save-dev webpack-dev-server
它將在當(dāng)前文件夾下啟動(dòng)一個(gè)websocket服務(wù)业踏，端口號(hào)為8080
在package.json里我們只需要添加檬姥，這一段東西 （script有了，其實(shí)這一步?jīng)]必要）
devServer: {
port: 8080 //設(shè)置監(jiān)聽(tīng)端口（默認(rèn)的就是8080）
contentBase: "./build",//本地服務(wù)器所加載的頁(yè)面所在的目錄
colors: true,//終端中輸出結(jié)果為彩色
historyApiFallback: true,//不跳轉(zhuǎn)捧搞，用于開(kāi)發(fā)單頁(yè)面應(yīng)用抵卫，依賴(lài)于HTML5 history API 設(shè)置為true點(diǎn)擊鏈接還是指向index.html
}
安裝React最新版本
npm install --save-dev react react-dom
安裝Babel
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2
專(zhuān)門(mén)用來(lái)熱更新 React的react-hot-loader(最新版本)
npm install --save react-hot-loader@next
最重要的：新建.babelrc并配置
// 新建.babelrc
{
"presets": [
["es2015", {"modules": false}],
// webpack現(xiàn)在已經(jīng)支持原生的import語(yǔ)句了, 并且將其運(yùn)用在tree-shaking特性上
"stage-2",
// 規(guī)定JS運(yùn)用的語(yǔ)言規(guī)范層級(jí)
// Stage 2 是 "草案", 4 是 "已完成", 0 is "稻草人(strawman)"。
// 詳情查看 https://tc39.github.io/process-document/
"react"
// 轉(zhuǎn)譯React組件為JS代碼
],
"plugins": [
"react-hot-loader/babel"
// 開(kāi)啟react代碼的模塊熱替換（HMR）
]
}
最終webpack.config.js配置
const { resolve } = require('path');
const webpack = require('webpack');
module.exports = {
context: __dirname,
entry: [
'react-hot-loader/patch',
'webpack/hot/only-dev-server',
'./app/main.js'
],
output: {
path: resolve(__dirname, 'build'),//打包后的文件存放的地方
filename: "bundle.js",//打包后輸出文件的文件名
publicPath: "/"
},
devServer: {
contentBase: resolve(__dirname, 'build'),
hot: true,
publicPath: '/',
},
module: {
rules: [
{
test: /\.jsx?$/,
use: [
'babel-loader',
],
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'style-loader','css-loader'
],
exclude: /node_modules/
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
],
devtool: "cheap-eval-source-map",
};
最終文件目錄
最終的文件目錄結(jié)構(gòu)胎撇，以后可以寫(xiě)個(gè)python腳本自動(dòng)配置環(huán)境介粘，奶奶的氣死老子
寫(xiě)main.js內(nèi)容
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import Cpt from './component';
const render = (Component) => {
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
document.getElementById('div1')
)
};
render(Cpt);
if(module.hot) {
module.hot.accept( () => {
render(Cpt)
});
}
寫(xiě)component.js
import React from 'react';
const Cpt = () => (
<div>
<h1>我是蓋世英雄！</h1>
</div>
);
export default Cpt;
最后
npm run dev
筆記來(lái)源和總結(jié)
- 寫(xiě)個(gè)腳本可以一件配置
- es6的react教程不多晚树，不全姻采，要看都看es6的。
-
module.hot.accept()這個(gè)函數(shù)的api改了爵憎，只有一個(gè)參數(shù)慨亲，是一個(gè)function
