React開發環境搭建（react,babel,webpack webpack-dev-server)

時間 2019-12-08

標籤 react 開發環境搭建 babel webpack dev server 欄目 React 简体版

原文原文鏈接

最終效果:
配置webpack 自動編譯腳本，內容更改後瀏覽器頁面自動刷新，提升效率。主要靠webpack 的watch 功能。
npm 全局安裝的包： webpack webpack-cli webpack-dev-server.
項目內2個文件 package.json. webpack.config.js 配置以下。截圖不是最簡單結構，後面增長redux, react-redux 包加了點東西。
須要創建這樣的目錄後， npm install 就會根據package.json安裝項目須要的包。而根據webpack.config.js 就會自動運行。詳細的東西再也不介紹，專題學習更加穩妥。
目錄結構：

javascript

//webpack.config.js 配置文件

const path = require('path');

module.exports = {
    entry: "./www/app/main.js",     //入口文件
    output: {                   //出口文件
        path: path.resolve(__dirname, "www/dist"),  //打包到哪一個文件夾中
        filename: "bundle.js",                   //打包到哪一個文件
        publicPath : "/xuni"
    },
    watch : true,
    mode: "development",
    module : {
        rules: [
            {
                test: /\.js$/,                      //以.js結尾的文件
                include: [
                    path.resolve(__dirname, "www/app")  //包括什麼文件夾
                ],
                exclude: [
                    path.resolve(__dirname, "node_modules")   //不包括
                ],
                loader: "babel-loader",
                options: {
                    presets: ["env","react"]
                }
            }
        ]
    }
}
    1 	//package.json 文件。 
    2 	
    3 	{
    4 	  "name": "react-0327",
    5 	  "version": "1.0.0",
    6 	  "description": "",
    7 	  "main": "index.js",
    8 	  "scripts": {
    9 	    "dev": "webpack-dev-server --content-base ./www --port 8080"
   10 	  },
   11 	  "author": "",
   12 	  "license": "ISC",
   13 	  "devDependencies": {
   14 	    "babel-core": "^6.24.1",
   15 	    "babel-loader": "^7.1.4",
   16 	    "babel-preset-env": "^1.7.0",
   17 	    "babel-preset-react": "^6.24.1"
   18 	  },
   19 	  "dependencies": {
   20 	    "react": "^16.8.5",
   21 	    "react-dom": "^16.8.5"
   22 	  }
	}

須要注意的引入babel-loader 後。相應高低版本問題，出現問題，根據提示便可解決。譬如本例用到env, react 2個babel loader. 是比較新的版本，若是用babel-present-es2015 則是低版本支持，根據提示搜索便可解決問題。

根據webpack的配置。在index.html 引入js 文件方式：
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>

    <script src="xuni/bundle.js"></script>
</body>
</html>

入口Main.js 和組件App.js 分別爲： java

//main.js
import React from "react";
import ReactDOM from "react-dom";

import App from "./App.js";

ReactDOM.render(
    <App></App>
    ,
    document.getElementById("app")
);


//App.js
import React from "react";
export default class App extends React.Component{
    constructor(){
        super();
    }

    render(){
        
        return <div>