（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

GitHub Repo: vue-template-babel-compiler

使用 Babel 为 Vue.js SFC 启用 Optional Chaining(?.), Nullish Coalescing(??) 等诸多 ES 新语法。

示例

特性

• vue-template-compiler && vue-template-es2015-compiler 的所有功能
• 新语法: Optional Chaining, Bigint, nullish coalescing and more
• 自定义语法、babel 插件等等...

用法

1. 安装

npm install vue-template-babel-compiler --save-dev

2. 配置

1. Vue-CLI

Vue-CLI 配置演示项目

// vue.config.js
module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                options.compiler = require('vue-template-babel-compiler')
                return options
            })
    }
}

2. Nuxt.js

Nuxt.js 配置演示项目

// nuxt.config.js
export default {
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    loaders: {
      vue: {
        compiler: require('vue-template-babel-compiler')
      }
    },
  },
  // ...
}

3. Webpack

// your webpack.config.js where config vue-loader
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
            compiler: require('vue-template-babel-compiler')
        }
      }
    ]
  }
}

欢迎 Issues && PR.

本文转自网络，版权归原作者所有，原文链接：https://segmentfault.com/a/1190000040476035