本文是一篇使用 jsx 来开发 vue 组件的入门教程,尽量避免使用无关技术。另外,本文也不是 jsx、babel 等技术的教程,不会介绍相关语法,而只是简单地分享一下开发的流程。
本项目不涉及打包,只会创建一个很简单的组件,并用一个很简单的 HTML 文件把组件显示出来。
初始化项目
创建目录和文件
# 创建项目根目录
mkdir vue-jsx
cd vue-jsx
# 初始化项目
npm init -y
# 创建相关目录和源文件
mkdir src\components
touch src\components\CountAdd.js
touch src\index.html
- CountAdd.js 是包含 JSX 语法的 Vue 组件。
- 后续操作会把 CountAdd.js 编译到 dist\components 中。
- index.html 将会消费 CountAdd 组件。
编写源文件
使用 JSX 语法写组件
下面在 CountAdd.js 中写一个简单的组件,实现一个按钮,每点击一次,显示的数字便会自增1。
const CountAdd = {
render(h) {
return (
<button onClick={this.countAdd}>{this.count}</button>
);
},
data: ()=>({
count: 0
}),
methods: {
countAdd(e) {
this.count += 1;
},
},
};
编写使用组件的 HTML 文件
<!DOCTYPE html>
<html lang="zh-CN">
<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>Vue & JSX</title>
</head>
<body>
<div id="app">
<!-- 使用组件 -->
<count-add></count-add>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../dist/components/CountAdd.js"></script>
<script>
var app = new Vue({
el: '#app',
components: {
"count-add": CountAdd // 注册组件
},
});
</script>
</body>
</html>
- 由于 jsx 是要经过编译的,所以不能引用 src/CountAdd.js,而是要引用编译后的文件。
使用 Babel
由于浏览器无法解析 JSX 语法,所以必须借助于 Babel 将 JSX 转换为 JS 代码。
安装 Babel
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
参考网址: https://babeljs.io/docs/en/usage
安装 vue-jsx 插件
Babel 只是提供了一个平台,具体转换什么,需要由插件来完成。
npm i --save @vue/babel-preset-jsx
npm i --save @vue/babel-helper-vue-jsx-merge-props
参考网址: https://github.com/vuejs/jsx
配置 Babel
要使用 Babel,需要对 Babel 进行配置,即编写 babel.config.js 文件。在项目根目录下添加该文件,内容如下:
module.exports = function (api) {
api.cache(true);
const presets = ["@vue/babel-preset-jsx","@babel/preset-env"];
const plugins = [];
return {
presets,
plugins
};
}
- 上面的配置实现了对 ES6+ 语法的转译和 JSX 语法的转译。
执行编译
使用 babel 命令来编译组件
npx babel src\components\* --out-dir dist/components
- 由于 babel 命令是局部安装,所以得借助于 npx 命令来启动。
使用 Gulp
如果只是使用了 Babel,那么编译是需要手动执行的,较为麻烦。在开发过程中,可以让 Gulp 来自动执行 babel 命令,提升开发效率。
安装 Gulp
npm i --save-dev gulp-cli gulp
参考网址: https://gulpjs.com/docs/en/getting-started/quick-start
安装 Babel 插件
与 Babel 类似,Gulp 也只是一个平台,具体要执行什么任务,以及执行任务过程中需要用到什么功能,都是由插件和配置文件来指定的。
npm i --save-dev gulp-babel
配置 Gulp
Gulp 的作用是帮助开发者运行一些预定义好的任务,这些任务需要开发者自己定义。下面在项目根目录下添加一个 gulpfile.js 文件,内容如下:
const { src, dest, series, watch } = require('gulp');
const babel = require('gulp-babel');
// 一个示例任务
function demoTask(cb) {
console.log('hello world!');
cb();
}
// jsx 转换任务
// 将 src/components/ 目录下的 *.js 文件经 Babel 转换后存储到 dist/components/ 目录中
function jsx() {
return src('src/components/*.js')
.pipe(babel())
.pipe(dest('dist/components/'));
}
// 将前两个任务串连起来组成一个新的任务
const defaultTast = series(demoTask, jsx);
// 导出 default 任务,这样在运行 Gulp 时可以不指定任务名
exports.default = function auto() {
// watch 实现文件监视,当文件被修改时自动执行任务
watch('src/**/*', { ignoreInitial: false }, defaultTast);
};
运行 Gulp
npx gulp
Gulp 运行起来后,便会持续监控 JSX 源文件,并在源文件被修改时自动执行 Babel 编译的任务,将 JSX 编译为 JS 代码。