搭建React开发环境(使用babel,webpack3)

桃扇骨 2022-06-09 00:18 276阅读 0赞

# 案例: 使用webpack和babel搭建react开发环境，把jsx文件转化为js文件 #

### 1.第一件事是设置项目: ###

指定盘建立一个文件下(本案例实在F盘的react目录下,后面没特殊说，默认使用F:/react 这个目录)，建立一个项目文件夹helloreact,在该文件夹内创建两个子文件夹dev和output.。

在dev文件夹内会存放没有转化的jsx文件，es6文件和其他脚本相关的内容。换句话说这里存放你正在写的和实际的工作代码

在output文件夹内，我们会把在dev文件夹中的脚本文件上运行各种构建工具的结果放在这里。本案例中，babel会将所有jsx文件转换为js

### 2.在helloreact目录下建立一个空的html文件 index.html ###

html文件中只有一个id 为container 的div。和一个指向会在output文件内生成的javascript文件 (myCode.js) 的script标记。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>React!React!React!</title> </head> <body> <div id="container"></div> <script src="output/myCode.js"></script> </body> </html>

### 3.安装并初始化node.js ###

如果我们已经安装了node.js, 我们可以通过 npm  - v 查看 node的版本，如果版本过低，我们要 更新node 的版本  npm install npm@latest -g

项目中我们尽量保证node 的版本新一点，否则我们在安装 webpack 或者 babel等其他工具时会出现错误。现在我们已经安装好node 并保证node的版本最新，下面我们在helloreact目录下初始化node。指令 : npm init 。然后控制台会出现一大堆问题，帮助设置项目的node.js。第一个问题是设置项目的 名称，我们就默认输入helloreact.。

其余的步骤我们按提示一直按回车键就可以了。 最终我们会在helloreact 文件夹得到一个package.json文件。文件内容如下:

{ "name": "mytotallyawesomeapp", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

### 4.安装react 依赖 ###

指令：npm install react react-dom --save-dev

此时你会发现我们项目中多了一个node-modules目录，在这个文件夹中你会看到很多模块(Node.js 成为模块，我们成为库)，这些模块就是我们项目的依赖库。

安装好react依赖后 我们就可以在项目中使用react了

### 5.添加jsx 文件 ###

在dev文件中创建一个index.jsx文件，内容如下:

import React from "react"; 
    import ReactDOM from "react-dom"; 
    var HelloWorld = React.createClass({ 
        render: function() { 
            return ( 
                <p>Hello, {this.props.greetTarget}!</p> 
            ); 
        } 
    }); 
    ReactDOM.render( 
        <div> 
            <HelloWorld greetTarget="React"/> 
            <HelloWorld greetTarget="Redux"/> 
            <HelloWorld greetTarget="React-router"/> 
            <HelloWorld greetTarget="webpack"/> 
            <HelloWorld greetTarget="babel"/> 
            <HelloWorld greetTarget="ES6"/> 
        </div>, 
        document.querySelector("#container") 
    );

剩下的我们需要做的就是 通过webpack 和babel 把 jsx 转化为js

### 6.设置webpack ###

本地安装(推荐)

npm install --save-dev webpack

这个命令会花一些时间，下载webpack 包和其他的依赖。然后我们在helloreack 目录下创建一个 webpack.config.js文件。在这个文件中，我们会指定一堆javascript属性，

来定义原始未修改的源文件的位置，以及最终源文件输入到哪里。wenpack.config.js 文件配置和详解如下