vue 单文件组件 babel 编译，不影响母体

Vue.js 是一款流行的 JavaScript 框架，其中的单文件组件能够让我们更加高效地组织和开发我们的应用程序。但是，由于一些原因，有时我们可能需要在单文件组件中使用 ES6/ES7/ES8 的新特性，而这些特性并不是所有浏览器都支持的。在这种情况下，我们需要使用 Babel 这个工具来将我们使用新特性编写的代码转换成低版本的 JavaScript 代码，以便在低版本的浏览器上运行。本文将介绍如何使用 Babel 编译 Vue 单文件组件，并且不会影响到原有的代码。

Babel 简介

Babel 是一款 JavaScript 编译器，可以将使用最新特性的 ECMAScript (ES6, ES7, ES8) 代码转换成低版本的 JavaScript 代码，然后在现有的浏览器上运行。下面是一个简单的例子：

// ES6代码
const sum = (a, b) => a + b;

// 编译后的ES5代码
var sum = function(a, b) {
  return a + b;
};

在上面的例子中，我们使用了箭头函数这个 ES6 的新特性，但是它并不是所有的浏览器都支持的。因此，我们需要使用 Babel 来将其转换成 ES5 的语法，以便在低版本的浏览器上运行。

使用 Babel 编译 Vue 单文件组件

为了使用 Babel 编译 Vue 单文件组件，我们需要安装一些依赖项：

npm install --save-dev @vue/cli-plugin-babel babel-preset-env

其中，@vue/cli-plugin-babel 是为 Vue CLI 3.x 版本设计的 Babel 插件，而 babel-preset-env 是用来编译最新版本的 JavaScript 语法的 Babel 预设。安装完这些依赖项之后，我们需要更新我们的 vue.config.js 文件来配置 Babel：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
  }
}

在上面这个配置中，我们使用 babel-loader 来加载和编译我们的 JavaScript 代码，而 @babel/preset-env 预设用来编译支持最新版本的语法特性，以便在不同浏览器中进行兼容性处理。完整的 vue.config.js 文件示例可以参考 Vue 官网。

示例代码

下面是一个简单的 Vue 单文件组件，其中包含了 ES6 的箭头函数语法：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    };
  },
  computed: {
    fullname: ({ firstName, lastName }) => {
      return `${firstName} ${lastName}`;
    }
  }
};
</script>

我们只需要按照上述的配置，就可以使用 Babel 编译这个文件，以便在不同的浏览器上运行。

总结

在本文中，我们介绍了使用 Babel 编译 Vue 单文件组件的方法，以便在不同的浏览器上运行。通过使用 Babel，我们可以使用最新版本的语法特性，而不会对我们的原有代码造成影响，让我们能够更加高效地开发我们的应用程序。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659413a3eb4cecbf2d8a5e34