近期，由用到了react.js來寫前端代碼，搭建開發(fā)環(huán)境對于從來沒有寫過react的同學來說有點復雜康吵，這里簡單記錄一下搭建過程（本人也是前端渣渣汁汗，寫錯的地方還望大家指出）
安裝webpack
需要Node 環(huán)境
全局安裝
cnpm install -g webpack
本項目安裝
cnpm install webpack --save-dev
安裝 react + es6 loaders
cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
還有css loader
cnpm install css-loader style-loader --save-dev
配置webpack.config.js 文件
var path = require('path');
module.exports = {
entry: './app/src/main.jsx',
output: {
path: path.resolve(__dirname, './app/web'), // 輸出文件的保存路徑
filename: 'bundle.js' // 輸出文件的名稱
},
module: {
loaders: [{
test: /\\.jsx?$/,
loaders: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{
test: /\\.css$/,
loader: 'style-loader!css-loader'
}
]
}
};
到這里基本開發(fā)環(huán)境搭建好了
安裝react 和react-dom
cnpm i react-dom --save
cnpm i react --save
安裝完之后會發(fā)現(xiàn)package.json下多了這兩個依賴項
在app/src 下新建一個main.jsx入口文件憔涉，簡單寫下內(nèi)容
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
然后在app/web下新建index.html ，里面需要引用bundle.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack 教程</title>
</head>
<body>
<div id="example"></div>
</body>
<script src="bundle.js"></script>
</html>
完成搭建
執(zhí)行命令
webpack
執(zhí)行成功抹凳，發(fā)現(xiàn)在app/web 目錄下多了個bundle.js文件
在瀏覽器打開index.html 文件漂彤。正確顯示hello world!
cnpm install 【name】--save-dev 與 cnpm install 【name】--save的區(qū)別，都是安裝一些模塊坊饶，唯一的區(qū)別是加有dev的是在開發(fā)時所依賴的模塊泄伪，而不加的是運行時需要的基本模塊。
那么怎么實時調(diào)試呢匿级？
cnpm install --save-dev webpack-dev-server react-hot-loader
webpack.config.js 的內(nèi)容更新如下
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: {
index: [
'./app/src/main.jsx'
]
},
output: {
path: path.resolve(__dirname, './app/web'), // 輸出文件的保存路徑
filename: 'bundle.js' // 輸出文件的名稱
},
module: {
loaders: [{
test: /\\.jsx?$/,
loaders: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{
test: /\\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\\.js?$/,
loaders: ['react-hot'],
include: [path.join(__dirname, 'app/src')]
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.LoaderOptionsPlugin({
options: {
postcss: function () {
return [precss, autoprefixer];
},
devServer: {
historyApiFallback:true,
hot:true,
inline:true,
progress:true
}
}
})
]
};
package.json 文件需要添加以下
執(zhí)行
npm run dev
訪問 localhost:8080 即可
寫的很粗淺 慚愧蟋滴，以后有時間會重新研究一下前端的構建及打包
