最近在學(xué)習(xí)Reactjs,從開(kāi)始學(xué)到現(xiàn)在剛?cè)腴T(mén)嚷堡，最大的感觸就是環(huán)境太TMD難配了,一下是我配置環(huán)境的過(guò)程
- 建立項(xiàng)目文件(APP),并進(jìn)行初始化
mkdir APP
npm init
- 若無(wú)額外要求晒奕，一直火車(chē)即可
2.安裝webpack,并將其加入項(xiàng)目依賴(lài)
npm install webpack --save-dev
3.配置webpack
- 在項(xiàng)目根目錄下建立webpack.config.js文件,并編輯內(nèi)容
touch webpack.config.js
module.exports = {
entry: "./entry.js", // 要打包的入口文件
output: { //打包后的文件
path: __dirname + '/dist', //表示使用絕對(duì)路徑
filename: "bundle.js" //輸出文件名
},
module: {
loaders: [ //用于加載一些靜態(tài)文件夾（css樣式舆绎，圖片之類(lèi)）
{test: /\.css$/, loader: "style-loader!css-loader"},
{
test: /\.jsx?$/,
loader: 'babel-loader',
// exclude: /node_modules/, //不進(jìn)行轉(zhuǎn)換的文件，可以提高打包速度
query: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
}
]
}
};
4.建立必要的的項(xiàng)目文件
- 建立entry.js作為入口文件
touch entry.js - 建立dist目錄用于存放打包后輸出的文件
mkdir dist - 建立index.html作為項(xiàng)目主頁(yè)面
touch index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript"
src="./dist/bundle.js" charset="utf-8"></script>
</body>
</html>
- 建立public目錄用于存放靜態(tài)文件
- 建立.babelrc文件
touch .babelrc
{
"presets": [
"es2015",
"react"
]
}
- 安裝必要依賴(lài)
npm install babel-loader --save-dev
npm install babel-core --save-dev
npm install react --save-dev
npm install react-dom --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-react --save-dev
npm install babel-loader --save-dev
npm install css-loader --save-dev
npm install style-loader --save-dev
6.寫(xiě)個(gè)例子
- entry.js
import React, {Component} from 'react';
import {render} from "react-dom";
class HelloMessage extends React.Component {
render() {
return <div>Hello World</div>;
}
}
render(<HelloMessage />, document.getElementById('app'));
- index.html不變
- 完成后首先在終端內(nèi)運(yùn)行
webpack編譯文件，然后再打開(kāi)index.html
