码迷,mamicode.com
首页 > Web开发 > 详细

React开发环境搭建(react,babel,webpack webpack-dev-server)

时间:2019-03-28 17:03:31      阅读:392      评论:0      收藏:0      [点我收藏+]

标签:ext   高效   def   init   pts   开发环境   app   ice   present   

最终效果:
配置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 就会自动运行。 详细的东西不再介绍, 专题学习更加稳妥。 
目录结构:
技术图片
 

//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 文件方式: 
 

<!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 分别为: 

//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
???????
 

React开发环境搭建(react,babel,webpack webpack-dev-server)

标签:ext   高效   def   init   pts   开发环境   app   ice   present   

原文地址:https://www.cnblogs.com/hijushen/p/10615960.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!