使用JSX 建立组件 Parser（解析器）开发的示例

这里我们一起从 0 开始搭建一个组件系统。首先通过上一篇《前端组件化基础知识》中知道，一个组件可以通过 Markup 和 JavaScript 访问的一个环境。

所以我们的第一步就是建立一个可以使用 markup 的环境。这里我们会学习使用两种建立 markup 的风格。

第一种是基于与 React 一样的 JSX 去建立我们组件的风格。第二种则是我们去建立基于类似 Vue 的这种，基于标记语言的 Parser 的一种风格。

JSX 环境搭建

JSX 在大家一般认知里面，它是属于 React 的一部分。其实 Facebook 公司会把 JSX 定义为一种纯粹的语言扩展。而这个 JSX 也是可以被其他组件体系去使用的。

甚至我们可以把它单独作为一种，快捷创建 HTML 标签的方式去使用。

建立项目

那么我们就从最基础的开始，首先我们需要创建一个新的项目目录：

mkdir jsx-component

初始化 NPM

在你们喜欢的目录下创建这个项目文件夹。建立好文件夹之后，我们就可以进入到这个目录里面并且初始化 npm。

npm init

执行以上命令之后，会出现一些项目配置的选项问题，如果有需要可以自行填写。不过我们也可以直接一直按回车，然后有需要的同学可以后面自己打开 package.json 自行修改。

安装 webpack

Wepack 很多同学应该都了解过，它可以帮助我们把一个普通的 JavaScript 文件变成一个能把不同的 import 和 require 的文件给打包到一起。

所以我们需要安装 webpack ，当然我们也可以直接使用 npx 直接使用 webpack，也可以全局安装 webpack-cli。

那么这里我们就使用全局安装 webpack-cli：

npm install -g webpack webpack-cli

安装完毕之后，我们可以通过输入下面的一条命令来检测一下安装好的 webpack 版本。如果执行后没有报错，并且出来了一个版本号，证明我们已经安装成功了。

webpack --version

安装 Babel

因为 JSX 它是一个 babel 的插件，所以我们需要依次安装 webpack，babel-loader, babel 和 babel 的 plugin。

这里使用 Babel 还有一个用处，它可以把一个新版本的 JavaScript 编译成一个老版本的 JavaScript，这样我们的代码就可以在更多老版本的浏览器中运行。

安装 Babel 我们只需要执行以下的命令即可。

npm install --save-dev webpack babel-loader

这里我们需要注意的是，我们需要加上 --save-dev，这样我们就会把 babel 加入到我们的开发依赖中。

执行完毕后，我们应该会看到上面图中的消息。

为了验证我们是正确安装好了，我们可以打开我们项目目录下的 package.json。

{ "name": "jsx-component", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "babel-loader": "^8.1.0", "webpack": "^5.4.0" } }

好，我们可以看到在 devDependencies 下方，确实是有我们刚刚安装的两个包。还是担心的同学，可以再和 package.json 确认一下眼神哈。

配置 webpack

到这里我们就需要配置一下 webpack。配置 webpack 我们需要创建一个 webpack.config.js 配置文件。

在我们项目的根目录创建一个 webpack.config.js 文件。

首先 webpack config 它是一个 nodejs 的模块，所以我们需要用 module.exports 来写它的设置。而这个是早期 nodejs 工具常见的一种配置方法，它用一个 JavaScript 文件去做它的配置，这样它在这个配置里面就可以加入一些逻辑。

module.exports = {}

Webpack 最基本的一个东西，就是需要设置一个 entry (设置它的入口文件)。这里我们就设置一个 main.js 即可。

module.exports = { entry: "https://www.jb51.net/article/main.js" }

这个时候，我们就可以先在我们的根目录下创建一个 main.js 的文件了。在里面我们先加入一个简单的 for 循环。

// main.js 文件内容 for (let i of [1, 2, 3]) { console.log(i); }

这样 webpack 的基本配置就配置好了，我们在根目录下执行一下 webpack 来打包一下 main.js 的文件来看看。需要执行下面的这行命令进行打包：

webpack

执行完毕之后，我们就可以在命令行界面中看到上面这样的一段提示。

注意细节的同学，肯定要举手问到，同学同学！你的命令行中报错啦！黄色部分确实有给我们一个警告，但是不要紧，这个我们接下的配置会修复它的。