React+Webpack+Babel開發環境的搭建
阿新 • • 發佈：2019-01-04
1、首先下載Node.js,並配置好環境變數
2、安裝全域性包
由於“牆”的原因，建議使用淘寶的npm映象，下載：npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install babel -g
$ cnpm install webpack -g
$ cnpm install webpack-dev-server -g
3、建立一個空專案
安裝好後建立一個名叫 learn-webpack 的專案並進入該專案資料夾，
mkdir learn-webpack && cd learn-webpack 通過編輯器找到剛才建立的專案。
使用終端進入建立專案所在資料夾的的初始化環境
初始化package.json,根據提示填寫package.json的相關資訊
$ cnpm init
下載webpack依賴，--save-dev表示將依賴新增到package.json中的'devDependencies'物件中
$ cnpm install webpack --save-dev
下載完後，根目錄會增加如下兩個檔案
繼續使用終端安裝需要的元件模組
$ cnpm install webpack-dev-server --save-dev
babel 相關的模組
$ cnpminstall babel-loader
react 相關的模組
$ cnpm install react-dom --save
在根目錄新建檔案 webpack.config.js
var path = require('path'); module.exports = { devServer: { historyApiFallback: true, hot: true, inline: true, progress: true, contentBase: './app', port: 8090 }, entry : [ path.resolve(__dirname, 'app/main.jsx'), 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8090' ], output : { path : path.resolve(__dirname, 'build'), filename:'bundle.js', }, module: { loaders: [ { test: /\.js[x]$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'stage-1', 'react'] } }, { test: /\.scss$/,loader: 'style!css!sass'}, // { test: /\.css$/,loader: 'style-loader!css-loader'}, ] } };
main.jsx
// 'use strict'
// var component = require("./component.js");
// document.body.appendChild(component());
var React = require('react');
var ReactDom = require('react-dom');
var Rstas = require('./Rstas.jsx');
var Hello = React.createClass({
render : function render(){
return (
<div>
<span>
Hello {this.props.name}
</span>
<Rstas name='newxxxxxxx' />
</div>
)
}
});
ReactDom.render(
<Hello name="World" />,
document.getElementById('AppRoot')
);
module.exports = Hello; Ratas.jsx
var React = require('react');
var Rstas = React.createClass({
render : function render(){
return <div>xxxx {this.props.name}</div>;
},
componentDidMount : function(){
console.log('.............');
console.log('.............');
console.log('.............');
console.log('.............');
}
});
module.exports = Rstas;index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div id='AppRoot'></div>
<script src="bundle.js"></script>
</body>
</html>手動建立babel的配置檔案（規範名稱“.babelrc”）
{
"presets": [
"es2015",
"react",
],
"plugins": []
}
切換到終端，還是在之前的根目錄輸入$ cnpm run dev
沒有報錯後，切換到瀏覽器在位址列輸入 localhost:8090.
全部步驟都在這，在學習時出現別的錯誤百度一下基本都能解決。