如何用 Babel 编译 Vue 单文件组件

在现代前端开发中，Vue 单文件组件已经成为了一种常见的开发方式。但是，在一些比较老的项目中，可能还存在着旧版的浏览器，这些浏览器并不支持 ES6，甚至还支持不了模块化开发。为了让这些旧版浏览器能够正常运行 Vue 单文件组件，我们需要用 Babel 进行转译。

Babel 简介

Babel 是一个 JavaScript 编译器，能够将 ES6/ES7 代码转换为 ES5 代码。通过 Babel，我们可以使用最新的 JavaScript 语言特性，而不用担心代码在旧版浏览器上无法运行。

配置 Babel

首先，我们需要安装 Babel。

npm install --save-dev babel-core babel-preset-env babel-plugin-transform-runtime

然后，在项目根目录下创建一个名为 .babelrc 的文件，内容如下：

{
  "presets": ["env"],
  "plugins": ["transform-runtime"]
}

这个文件的作用是告诉 Babel，我们要使用哪些转换器和插件。

配置 webpack

接下来，我们需要使用 webpack 来进行打包。配置 webpack 的时候，需要使用 babel-loader 来加载单文件组件，并将其编译成 ES5 代码。修改 webpack.config.js 的配置文件，如下所示：

// javascriptcn.com 代码示例
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader'
        },
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        use: {
          loader: 'vue-loader',
          options: {
            loaders: {
              js: {
                loader: 'babel-loader',
                options: {
                  presets: ['env']
                }
              }
            }
          }
        }
      }
    ]
  }
  //...
}

这里的关键是在 vue-loader 的配置中使用 babel-loader 对 js 文件进行编译。

编译 Vue 单文件组件

现在，我们就可以愉快地编译 Vue 单文件组件了。我们创建一个样例的 Vue 单文件组件，如下所示：

// javascriptcn.com 代码示例
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello, World!'
    }
  }
}
</script>

我们可以在入口文件中引入这个组件，并使用 webpack 进行打包。打包后的代码如下所示：

// javascriptcn.com 代码示例
var _template = require('./template.html');

var _template2 = _interopRequireDefault(_template);

var _vue = require('vue/dist/vue.common.js');

var _vue2 = _interopRequireDefault(_vue);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

_vue2.default.component('hello-world', {
  template: _template2.default,
  data: function data() {
    return {
      message: 'Hello, World!'
    };
  }
});

new _vue2.default({
  el: '#app'
});

这里的关键是使用 vue-loader 将 template 编译成 JavaScript，使用 babel-loader 将 ES6 代码编译成 ES5 代码。

总结

通过 Babel 和 webpack 的配合，我们可以很容易地将 Vue 单文件组件转化成旧版浏览器也能支持的 ES5 代码。在实际项目中，我们需要注意保持 webpack 和 babel 的版本兼容，避免出现不必要的问题。

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