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>

　　<h1>React 第一步 </h1>

</div> } }

参考：
http://https://www.valentinog.com/blog/react-webpack-babel/
https://www.cnblogs.com/chenziyu-blog/p/5675086.html

node