利用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

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

留意细节的同学，必定要举手问到，同学同学！你的呼吁行中报错啦！黄色部门确实有给我们一个告诫，可是没干系，这个我们接下的设置会修复它的。