搭建一個React項目環境
首先npm init生成package.json文件.
至此我們就可以安裝react的相關依賴了。
npm install react --save
npm install react-dom --save安裝完react相關，下一步安裝webpack
npm install webpack --save-dev
npm install webpack-dev-server --save-dev //實現熱加載webpack安裝完babel是重頭戲！babel更新了7版本後，捨棄了以前的 babel-- 的命名方式，改成了@babel/--的命名方式，通過試錯後，將常用依賴，以及.babelrc文件配置在此列出以供參考。
//devDependencies下的依賴
npm install @babel/core --save-dev //babel核心部分，把ES6轉化成ES5
npm install @babel/plugin-transform-runtime --save-dev //外部引用輔助函數和內置函數，自動填充代碼而不會污染全局變量。
npm install @babel/preset-env --save-dev //提供環境的映射獲得插件列表並傳遞給babel
npm install @babel/preset-react --save-dev //解析JSX
npm install babel-loader --save-dev //webpack需要用到這個loader
//dependencies下的依賴
npm install @babel/polyfill --save //轉義es6的API
npm install @babel/runtime --save //babel變換運行時插件的依賴
上述是babel的環境安裝，下面來看下.babelrc的文件配置，在根目錄下創建.babelrc文件
//.babelrc文件內容
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-transform-runtime"]
}下面在根目錄新建一個webpack.config.js文件，加入以下內容
var webpack = require('webpack');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/build',
filename: "bundle.js"},module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
}基本上配置內容都OK了！下面添加頁面內容
添加頁面內容
基本配置都有了，現在要往裏面增加內容了，首先第一步在根目錄下創建index.html文件，之後在根目錄創建src文件夾用來放我們新增的組件。
入口文件我在webpack中配的./src/app.js，所以在src下新建app.js文件，添加我們的第一個組件。
//根目錄下index.html文件內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
//src下的app.js文件內容
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render(){
return <div>hello world</div>
}
}
ReactDOM.render(<App />, document.getElementById('app'));
現在內容有了，我們把package.json中的script部分改成這樣：
"scripts": {
"start": "webpack-dev-server --hot --inline --mode development --colors --content-base",
"build": "webpack --progress --colors --mode production"
}
大功告成啦！現在使用npm start啓動你的項目吧！效果如圖
