Geekly articles weekly

使用Babel和Webpack从头开始建立一个React项目

有许多工具可以为React开发准备环境。 例如，我们的React教程使用create-react-app工具创建一个模板项目，其中包含开发React应用程序所需的一切。 这篇文章的作者（我们今天将发表其译文）想谈谈如何独立配置环境以使用Babel和Webpack开发React项目。 这些工具也用在使用create-react-app工具创建的项目中，我们相信研究React开发的任何人都会对了解它们以及更深层次地创建React项目的方法感兴趣。 即，我们将讨论如何配置Webpack，以便该工具将使用Babel将JSX代码编译为JavaScript代码，以及如何配置用于开发React项目的服务器。



Webpack


Webpack用于编译JavaScript模块。 该工具通常称为“捆绑软件”（来自捆绑软件）或“模块构建器”。 安装后，您可以使用命令行界面或其API来使用它。 如果您不熟悉Webpack，建议您阅读有关Webpack的基本原理，并与其他模块构建者进行比较 。 概括地说，这就是Webpack的外观。


Webpack工作

Webpack吸收了项目所依赖的所有内容，并将其转换为可以转移到客户端的静态资源。 应用程序打包非常重要，因为大多数浏览器都限制了同时下载资源的能力。 此外，它还可以通过仅向客户端发送其所需的内容来节省流量。 特别是，Webpack使用内部缓存，由于该缓存仅将模块下载到客户端一次，因此可以更快地加载网站。

巴别塔


Babel是一个编译器，主要用于将ECMAScript标准的最新版本中采用的构造转换为现代（而不是最新的）浏览器以及可运行JavaScript的其他环境都可以理解的格式。 另外，Babel可以使用@ babel / preset-react转换为JavaScript和JSX代码。


巴别塔

感谢Babel，我们在开发React应用程序时可以使用JSX。 例如，以下是使用JSX的代码：

import React from "react"; function App(){ return(  <div>     <b>Hello world!</b>  </div> ) } export default App;

这样的代码看起来很整洁，很清楚，很容易阅读和编辑。 查看它，您可以立即理解，它描述了一个组件，该组件返回包含文本Hello world!的<div>元素Hello world! 粗体。 这是一个代码示例，该代码在不使用JSX的情况下执行相同的操作：

 "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _react = require("react"); var _react2 = _interopRequireDefault(_react); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function App(props) { return _react2.default.createElement(   "div",   null,   _react2.default.createElement(     "b",     null,     "Hello world!"   ) ); } exports.default = App;

第一个示例相对于第二个示例的优势显而易见。

先决条件


为了建立一个React应用项目，我们将需要以下npm模块。

  • react-React库
  • react-dom是一个库，可以帮助我们在浏览器中使用React的功能。
  • babel /核心-JS中的JSX转换。
  • babel /预设环境-创建适用于旧版浏览器的代码。
  • babel /预设反应-配置编译器以使用React代码。
  • babel-loader-配置Webpack以与Babel一起使用。
  • css-loader-设置Webpack以使用CSS。
  • webpack-模块组装。
  • webpack-cli-从命令行使用Webpack。
  • 样式加载器-将所有使用的CSS代码加载到HTML文件的标头中。
  • webpack-dev-server-设置开发服务器。

现在，在react-scratch文件夹中使用npm（ npm init ）创建一个新项目，并使用以下命令安装上述某些软件包：

 npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader webpack webpack-cli style-loader webpack-dev-server

程序的入口点将是index.js文件，该文件包含在项目根目录下的src文件夹中。 该项目的结构如下所示。 有些文件和文件夹是自动创建的，有些则需要您自己创建。


项目结构

在此存储库中可以找到完成的项目，我们将在此处处理。

component文件夹将包含项目组件（在我们的例子中，这里只有一个组件）。 在dist文件夹中的main.js文件中，将找到已编译的代码，而index.html是我们应用程序的主HTML文件（如上所述）。

Webpack设置


Webpack可以通过多种方式进行配置。 特别是，此工具的设置可以采用命令行参数的形式，也可以作为配置文件以名称webpack.config.js的形式出现在项目中。 在其中，您需要描述和导出包含设置的对象。 我们将开始使用看起来像这样的对象的描述来设置该文件（我们将对其进行部分考虑，下面将给出其完整代码）：

 { entry: "./src/index.js", mode: "development", output: {   filename: "./main.js" }, }

entry属性使用项目源代码设置主文件。 mode属性的值指示要编译的环境的类型（在我们的示例中，这是development环境）以及将编译的文件放置在何处。

项目工作


将以下代码放入位于dist文件夹中的项目的index.html文件中：

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head>   <meta charset="utf-8">   <title>React From Scratch</title> </head> <body>   <div id="root">   </div> </body> <script type="text/javascript" src="main.js"> </script> </html>

请注意此文件中存在的script标签。 它指向main.js文件，该文件将在项目编译期间获得。 我们将使用<div>元素和root标识符来显示React应用程序。

现在安装react和react-dom软件包：

 npm install react react-dom

将以下代码添加到index.js ：

 import React, { Component } from "react"; import ReactDOM from "react-dom"; import App from "./component/app.component"; ReactDOM.render(<App />, document.querySelector("#root"));

这是此类React应用程序文件的标准代码。 在这里，我们连接库，连接组件文件，并在带有root标识符的<div>显示应用程序。

这是app.component.js文件的代码：

 import React, { Component } from "react"; import s from "./app.component.css"; class MyComponent extends Component { render() {   return <div className={s.intro}>Hello World</div>; } } export default MyComponent;

这是app.component.css文件的代码：

 .intro { background-color: yellow; }

配置Babel


巴别塔是具有巨大潜力的运输者。 特别是，他可以将LESS转换为CSS，将JSX转换为JS，将TypeScript转换为JS。 我们将仅使用两种配置-react和env（它们也称为“预设”）。 可以用不同的方式配置Babel，特别是，我们在谈论命令行工具，特殊设置文件，标准package.json文件。 我们对最后的选择感到满意。 将以下部分添加到package.json ：

 "babel": {   "presets": [     "@babel/env",     "@babel/react"   ] }

通过这些设置，Babel将知道他需要使用哪些预设。 现在将Webpack配置为使用Babel。

设置Webpack以与Babel一起使用


在这里，我们将使用babel-loader库，该库使您可以将Babel与Webpack一起使用。 实际上，关键是Babel将能够在Webpack处理文件之前对其进行拦截和处理。

▍JS文件


以下是有关处理JS文件的规则（此代码将转到webpack.config.js文件），它们表示此文件导出的设置对象的属性之一：

 module: {   rules: [     {       test: /\.m?js$/,       exclude: /(node_modules|bower_components)/,       use: {         loader: "babel-loader"       }     },   ] }

规则数组存储在此处表示的对象的rules属性中，根据该规则，应处理test属性中描述的正则表达式指定的文件。 在这种情况下，该规则将应用于所有扩展名为.m和.js ，并且我们不想node_modules来自node_modules和bower_components文件夹中的文件。 此外，在这里我们指示我们要使用babel-loader。 之后，Babel首先将处理我们的JS文件，然后使用Webpack对其进行打包。

▍CSS文件


将用于处理CSS文件的设置添加到module对象的rules数组中：

 module: {   rules: [     {       test: /\.m?js$/,       exclude: /(node_modules|bower_components)/,       use: {         loader: "babel-loader"       }     },     {       test: /\.css$/,       use: [         "style-loader",         {           loader: "css-loader",           options: {             modules: true           }         }       ]     },  ] }

我们将解决使用style-loader和css-loader处理CSS文件的任务。 use属性可以接受对象或字符串的数组。 从最后开始调用装载程序，因此我们的文件将首先使用css-loader处理。 我们通过在options对象的modules属性中写入true来配置此工具。 因此，CSS样式将仅应用于导入它们的那些组件。 Css-loader将允许在CSS文件中导入命令，然后style-loader将在页面的<head>部分中以style标记的形式添加结果：

 <style> <--  css --> </style>

▍静态资源


我们将继续处理module设置对象，描述处理其中的静态资源的规则：

 module: {   rules: [     {       test: /\.m?js$/,       exclude: /(node_modules|bower_components)/,       use: {         loader: "babel-loader"       }     },     {       test: /\.css$/,       use: [         "style-loader",         {           loader: "css-loader",           options: {             modules: true           }         }       ]     },     {       test: /\.(png|svg|jpg|gif)$/,       use: ["file-loader"]     }   ] }

如果系统遇到扩展名为PNG，SVG，JPG或GIF的文件，则将使用文件加载器来处理此类文件。 处理此类文件对于正确准备和优化项目很重要。

设置开发服务器


现在，在webpack.config.js文件中，配置开发服务器：

 devServer: {   contentBase: path.join(__dirname, "dist"),   compress: true,   port: 9000,   watchContentBase: true,   progress: true },

contentBase设置devServer的contentBase属性指向资源和index.html文件所在的文件夹。 port属性允许您指定服务器将侦听的端口。 watchContentBase属性允许监视contentBase属性指定的文件夹中文件的更改。

这是webpack.config.js文件的完整代码：

 const path = require("path"); module.exports = { entry: "./src/index.js", mode: "development", output: {   filename: "./main.js" }, devServer: {   contentBase: path.join(__dirname, "dist"),   compress: true,   port: 9000,   watchContentBase: true,   progress: true }, module: {   rules: [     {       test: /\.m?js$/,       exclude: /(node_modules|bower_components)/,       use: {         loader: "babel-loader"       }     },     {       test: /\.css$/,       use: [         "style-loader",         {           loader: "css-loader",           options: {             modules: true           }         }       ]     },     {       test: /\.(png|svg|jpg|gif)$/,       use: ["file-loader"]     }   ] } };

现在，我们将在scripts部分中将package.json添加到启动开发服务器的命令以及开始构建项目的命令：

 "scripts": {   "dev": "webpack-dev-server",   "start": "webpack" },

现在一切就绪，可以使用以下命令启动开发服务器：

 npm run dev

如果现在转到地址http：// localhost：9000 ，则可以看到我们项目的页面。


浏览器中的项目页面

为了生成项目，请使用以下命令：

 npm run start

之后，您可以在浏览器中打开index.html文件，并通过启动开发服务器并转到地址http：// localhost：9000来看到相同的内容。

总结


本文概述了设置Webpack和Babel以便在React项目中使用。 实际上，可以在我们今天拆解的基础上创建更复杂的配置。 例如，可以使用LESS代替常规的JS，而可以使用TypeScript编写代替CSS。 如有必要，您可以例如配置文件缩小等等。 当然，如果今天是您第一次接触到自己建立React项目的过程，那么在您看来，这一切都是非常困难的，并且使用现成的模板会容易得多。 但是，在弄清楚了一点之后，您会意识到设置的复杂性略有增加会给您带来更多的自由，使您可以按照需要的方式自定义项目，而无需完全依赖某些“标准”解决方案并减少对项目的依赖他们。

亲爱的读者们！ 在为React项目准备工作环境时，您最经常使用哪种方法？

Source: https://habr.com/ru/post/zh-CN436886/

More articles:


All Articles