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

最新推荐文章于 2025-03-27 21:49:01 发布

原创最新推荐文章于 2025-03-27 21:49:01 发布 · 833 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#reack环境搭建 #webpack #babel #react

本文详细介绍如何使用Webpack和Babel构建React开发环境，包括项目结构设置、安装配置及测试流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例: 使用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 文件配置和详解如下

var webpack = require("webpack"); 
var path = require("path"); 

var DEV = path.resolve(__dirname, "Dev"); 
var OUTPUT = path.resolve(__dirname, "output"); 

var config = { 
    entry: DEV + "/index.jsx", 
    output: { 
        path: OUTPUT, 
        filename: "myCode.js" 
    },
    devServer: {
        inline: true,
        port: 8181
    },
    module:{
       rules:[{
           test:/\.(js|jsx)$/,
           exclude:/node_module/,
           use:['babel-loader']
       }]
    }
}; 
module.exports = config;


  我们这里定义了两个变量 DEV,OUTPUT ,这两个变量指向项目中的同名文件夹。
  在config 对象中，有两个属性，entry和output , 这两个属性分别使用 DEV 和OUTPUT变量
  来帮助映射 index.jsx 到 myCode.js
  
  这里我们添加 module 和 loaders 对象，告诉 webpack 将entry属性中定义的index.jsx文件传给Babel
  转化为 Javascript 。

7.设置babel
通过指令安装以下库:
npm install --save-dev babel-core
npm install --save-dev  babel-loader
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
然后配置我们的package.json 文件，最终配置如下:

{
  "name": "helloreact",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",  
    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"  
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1"
  },
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  }
}

8.创建和测试我们的应用程序

到这里我们的react环境就算搭建好了，下面我们要测试我们的应用程序

输入命令：

node-module\.bin\webpack

这些命令会运行webpack,执行我们在webpack.config.js 和package.json配置文件中指定的所有事情(该demo中是把jsx转化为js)。结果如下

F:\react\helloreact>node_modules\.bin\webpack
Hash: b94032fadfcb6a876e84
Version: webpack 3.5.5
Time: 2586ms
    Asset    Size  Chunks                    Chunk Names
myCode.js  749 kB       0  [emitted]  [big]  main
  [81] ./Dev/index.jsx 1.13 kB {0} [built]
    + 183 hidden modules

此时我们 会发现output 文件夹下自动生成了一个mycode.js 文件。我们在浏览器中打开index.html 。如果一切都设置正确，我们会看到一个简单的react应用。
浏览器会显示:
 Hello, React!
Hello, Redux!
Hello, React-router!
Hello, webpack!
Hello, babel!
Hello, ES6!
自此，我们使用webpack3 和babel 构建的一个简单的react环境就算完成了。