Webpack、Babel、React开发环境的搭建教程-js教程-PHP中文网

首页

web前端

js教程

Webpack、Babel、React开发环境的搭建教程

小云云

Jan 11, 2018 am 09:27 AM

babel react webpack

本文主要介绍了详解Webpack+Babel+React开发环境的搭建的方法步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

1.认识Webpack

构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具，能够把各种文件（例如：ReactJS、Babel、Coffeescript、Less/Sass等）作为模块进行编译后进行打包。

2.安装Webpack

要开始使用Webpack在项目中进行开发前我们首先需要在全局环境中进行安装。

npm install webpack -g

登录后复制

3.创建一个项目

安装好后创建一个名叫learn-webpack的项目并进入该项目文件夹，当然项目名字你可以起你自己想要的名字。

mkdir learn-webpack && cd learn-webpack

登录后复制

通过编辑器找到你刚刚所创建的项目文件夹

现在我们来创建2个文件:

app.js

document.querySelector(&#39;#app&#39;).innerHTML = &#39;Hello World!&#39;;

登录后复制

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Learn-webpack</title>
</head>
<body>
 <p id="app"></p>
 <script src="dist/bundle.js"></script>
</body>
</html>

登录后复制

然后在终端执行

webpack ./app.js ./dist/bundle.js

最后执行启动本地的http服务

python -m SimpleHTTPServer

这个时候你就可以在浏览器输入:http://localhost:8000

如果你能在浏览器里面看到Hello world!那说明你已经成功的利用Webpack把main.js打包并编译到了bundle.js.是不是很简单？

定义一个配置文件

上面的只是对Webpack的使用进行了一些简单的介绍，实际上每个项目下都应该包含一个webpack.config.js，用来告诉Webpack需要做些什么。

module.exports = {
 entry: "app.js",
 output: {
  path: __dirname+"/dist",
  filename: "bundle.js"
 }
}

登录后复制

现在在终端中运行：webpack

看看是不是和之前输入 webpack ./app.js ./dist/bundle.js 的打包编译结果一样。

entry：指定打包的入口文件

1.单个文件打包为单个输出文件，直接写该文件的名字，例如：entry:"main.js"

2.多个文件打包为单个输出文件，将文件名放进一个数组，例如：entry:['main.js','xx.js']

3.多个文件打包为多个输出文件，将文件名放入一个键字对，例如：entry: {a:'main.js',b:'xx.js'}

output：配置打包结果

path为定义输出文件夹，filename为打包结果文件的名称，如果指定打包入口文件为上面的1、2种情况，filename里面直接跟你想输出的文件名。若为第3种情况filename里面需写成[name].文件名.js，filename里面的[name]为entry中的键。

监听变化自动打包

当我们在不停的对代码进行变动的时候，为了不修改一次然后又手动去进行打包一次。可以使用webpack的watch功能。

webpack --watch 或者 webpack -w

或者可以直接在配置代码里面把watch设置为true

module.exports = {
 entry: "app.js",
 output: {
  path: __dirname+"/dist",
  filename: "bundle.js"
 },
 watch: true
}

登录后复制

4.使用Babel

Babel是什么？Babel 是一个 JavaScript 编译器。使用它可以将ES6的语法转换为ES5的语法，以便在现在有的环境执行。

在终端执行:npm install webpack babel-loader babel-core babel-preset-es2015 --save-dev

执行安装完成后需要将之前的webpack.config.js修改为:

module.exports = {
 entry: "./app.js",
 output: {
  path: __dirname+"/dist",
  filename: "bundle.js"
 },
 module: {
  loaders: [
   {
    test: /\.jsx?$/,
    loader: &#39;babel-loader&#39;,
    exclude: /node_modules/,
    query: {
     presets: [&#39;es2015&#39;]
    }
   }
  ]
 },
 resolve: {
  extensions: [&#39;&#39;,&#39;.coffee&#39;,&#39;.js&#39;]
 }
}

登录后复制

现在就能在文件里面以ES6的语法进行代码编写，我们来测试一下，在app.js加入:

var func = str => {
 console.log(str);
};
func(&#39;我现在在使用Babel!&#39;);

登录后复制

ES6支持用箭头方式来定义函数，如果你能在控制台看到“我现在在使用Babel!”的打印文字，说明我们的Babel模块安装成功，可以开始使用ES6进行代码编写了。

loaders项里面表示用来加载这种类型的资源的loader。

test，是一段正则，表示进行匹配的资源类型。

exclude为指定应该被忽略的文件，我们在这儿指定了/node_modules/。

query有2种写法, 一种是直接以字符串形式跟在loader名后：

loader: &#39;babel-loader?presets[]=es2015

登录后复制

另一种如本文所示：

query: {
 presets: [&#39;es2015&#39;]
}

登录后复制

resolve.extensions 用于指明程序自动补全识别哪些后缀,

注意一下, extensions 第一个是空字符串! 对应不需要后缀的情况.

5.结合React

前面我们已经对Webpack和Babel进行了配置并做了一些介绍，基本的环境已经搭建好了，现在我们开始在使用React。

终端输入以下代码对react和react-dom进行安装

npm install react react-dom --save

登录后复制

Babel针对React的所有的预设插件

npm install babel-preset-react --save-dev

登录后复制

由于我们增加了react的预设插件，所以需要对webpack.config.js进行修改。

将module -> loaders下面的query修改如下：

query: {
  presets: [&#39;es2015&#39;,&#39;react&#39;]
}

登录后复制

现在创建一个名为hello.js的文件

import React from "react";

class Hello extends React.Component{
 render() {
  return (
   <p>
     Hello, World!
   </p>
  )
 }
}

export default Hello;

登录后复制

然后将app.js里面的文件修改如下：

import React from "react";
import ReactDOM from "react-dom";
import Hello from "./hello";

// var func = str => {
//  console.log(str);
// };
//
// func('我现在在使用Babel!');
// document.querySelector(&#39;#app&#39;).innerHTML = &#39;Hello World!&#39;;

ReactDOM.render(
 ,
 document.querySelector('#app')
);

登录后复制

如果你能在浏览器里面看到 "Hello, React!"，就说明我们已经将Webpack+Babel+React的环境搭建好了，接下来我们就可以此基础上来进行开发了。

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程

1662

CakePHP 教程

1419

Laravel 教程

1311

PHP教程

1262

C# 教程

1234

显示更多

Related knowledge

如何利用React和RabbitMQ构建可靠的消息传递应用 Sep 28, 2023 pm 08:24 PM

如何利用React和RabbitMQ构建可靠的消息传递应用引言：现代化的应用程序需要支持可靠的消息传递，以实现实时更新和数据同步等功能。React是一种流行的JavaScript库，用于构建用户界面，而RabbitMQ是一种可靠的消息传递中间件。本文将介绍如何结合React和RabbitMQ构建可靠的消息传递应用，并提供具体的代码示例。RabbitMQ概述：

React Router使用指南：如何实现前端路由控制 Sep 29, 2023 pm 05:45 PM

ReactRouter使用指南：如何实现前端路由控制随着单页应用的流行，前端路由成为了一个不可忽视的重要部分。ReactRouter作为React生态系统中最受欢迎的路由库，提供了丰富的功能和易用的API，使得前端路由的实现变得非常简单和灵活。本文将介绍ReactRouter的使用方法，并提供一些具体的代码示例。安装ReactRouter首先，我们需

PHP、Vue和React：如何选择最适合的前端框架？ Mar 15, 2024 pm 05:48 PM

PHP、Vue和React：如何选择最适合的前端框架？随着互联网技术的不断发展，前端框架在Web开发中起着至关重要的作用。PHP、Vue和React作为三种具有代表性的前端框架，每一种都具有其独特的特点和优势。在选择使用哪种前端框架时，开发人员需要根据项目需求、团队技能和个人偏好做出明智的决策。本文将通过比较PHP、Vue和React这三种前端框架的特点和使

如何利用React开发一个响应式的后台管理系统 Sep 28, 2023 pm 04:55 PM

如何利用React开发一个响应式的后台管理系统随着互联网的快速发展，越来越多的企业和组织需要一个高效、灵活、易于管理的后台管理系统来处理日常的操作事务。React作为目前最受欢迎的JavaScript库之一，提供了一种简洁、高效和可维护的方式来构建用户界面。本文将介绍如何利用React开发一个响应式的后台管理系统，并给出具体的代码示例。创建React项目首先

Java框架与前端React框架的整合 Jun 01, 2024 pm 03:16 PM

Java框架与React框架的整合：步骤：设置后端Java框架。创建项目结构。配置构建工具。创建React应用。编写RESTAPI端点。配置通信机制。实战案例（SpringBoot+React）：Java代码：定义RESTfulAPI控制器。React代码：获取并显示API返回的数据。

vue.js vs.反应：特定于项目的考虑因素 Apr 09, 2025 am 12:01 AM

Vue.js适合中小型项目和快速迭代，React适用于大型复杂应用。1)Vue.js易于上手，适用于团队经验不足或项目规模较小的情况。2)React的生态系统更丰富，适合有高性能需求和复杂功能需求的项目。

react有哪些闭包 Oct 27, 2023 pm 03:11 PM

react有事件处理函数、useEffect和useCallback、高阶组件等等闭包。详细介绍：1、事件处理函数闭包：在React中，当我们在组件中定义一个事件处理函数时，该函数会形成一个闭包，可以访问组件作用域内的状态和属性。这样可以在事件处理函数中使用组件的状态和属性，实现交互逻辑；2、useEffect和useCallback中的闭包等等。