使用 JSX 来开发 Vue 组件(借助 Babel 和 Gulp)

最新推荐文章于 2024-05-13 10:05:58 发布

pish7

最新推荐文章于 2024-05-13 10:05:58 发布

阅读量1.2k

点赞数 1

分类专栏： JavaScript vue 前端文章标签： vue jsx babel gulp

本文链接：https://blog.csdn.net/pish7/article/details/101029794

版权

JavaScript 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

本文是一篇使用 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 代码。

pish7

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用 JSX 来开发 Vue 组件(借助 Babel 和 Gulp)

本文是一篇使用 jsx 来开发 vue 组件的入门教程，尽量避免使用无关技术。另外，本文也不是 jsx、babel 等技术的教程，不会介绍相关语法，而只是简单地分享一下开发的流程。本项目不涉及打包，只会创建一个很简单的组件，并用一个很简单的 HTML 文件把组件显示出来。初始化项目创建目录和文件# 创建项目根目录mkdir vue-jsxcd vue-jsx# 初始化项目npm ...
复制链接

扫一扫

专栏目录