React 開發(fā)配置文件
1.安裝包
npm init(或者npm init -y跳過所有問題) 新建package.json-
常用命令：
-
npm i是npm install簡寫 -
npm i -S是npm --save簡寫 -
npm i -D是npm i --save-dev簡寫
-
-
需要安裝的項(xiàng)目開發(fā)依賴包(--save-dev)有：
babel-corebabel-preset-es2015babel-polyfill-
babel-loader: transpile React and ES6 babel-preset-reactreact-hot-loaderwebpackwebpack-dev-server
-
安裝依賴(--save):
reactreact-dom
-
安裝到全局環(huán)境下的包有：
webpackwebpack-dev-server
即：
// 新建 package.json
npm init -y
// --save-dev(或 -D) 項(xiàng)目開發(fā)依賴包
npm i -D babel-core babel-preset-es2015 babel-polyfill babel-loader
babel-preset-react react-hot-loader webpack webpack-dev-server
// --save(或 -S) 項(xiàng)目依賴包
npm i -S react react-dom
// 全局(-g)下的包
npm i -g webpack webpack-dev-server
2.配置webpack.config.js
根目錄下新建文件 webpack.config.js:
const webpack = require("webpack");
const path = require("path");
module.exports = {
devtool: "inline-source-map", // 用于調(diào)試
entry: [
"webpack-dev-server/client?http://127.0.0.1:8080/",
"webpack/hot/only-dev-server",
"./src" // 'src'文件下的所用js文件
],
output: {
path: path.join(__dirname, "public"), // '__dirname'表示當(dāng)前根目錄路徑
filename: "bundle.js" // 標(biāo)準(zhǔn)輸出文件
},
// webpack 尋找所需要的文件
resolve: {
moduleDirectories: ["node_modules", "src"],
extension: ["", ".js"]
},
// 注意事項(xiàng)：
// 1. "loaders" 不能寫成 "loader"
// 2. "babel?presets[]=react,presets[]=es2015"
// 不能寫成"babel?presets[]=es2015,presets[]=react"
// 因?yàn)閎abel轉(zhuǎn)換是有先后順序的，從you'dao'zuo
module: {
loaders: [
{
test: /\.jsx?$/,
exculde: /node_modules/,
loaders: ["react-hot-loader/webpack", "babel?presets[]=react, presets[]es2015"]
}
]
},
plugins: {
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorPlugin() // 查看錯誤
}
}
3.目錄結(jié)構(gòu)
例如：
- react-todos
- node_modules
- src
- components
- app.js
- create-todos.js
- todos-list.js
- todos-list-header.js
- todos-list-item.js
- index.js
- components
- index.html
- webpack.config.js
- package.json
目錄結(jié)構(gòu).jpg
4.index.thml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React ToDos</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
5.建立實(shí)時預(yù)覽開發(fā)
-
接下來就是 書寫組件(components),實(shí)時修改： 在Terminal中輸入：
webpack-dev-server -
建立本機(jī)服務(wù)器，瀏覽器中輸入：
localhost:8080/webpack-dev-server/
配置結(jié)束
2016/9/28 11:22:14
