Vueを解析するバベルを使用します.JS SFC

5635 ワード

VueテンプレートBabelコンパイラ


Vue.js SFCに基づいてOptional Chaining(?.)Nullish Coalescing(??)、多くの新しいES構文を可能にする.
Babel


デモ



機能


vue-template-compilerのすべての特徴

  • の新しいES構文:Optional ChainingBigintNullish Coalescingとより多くの
  • カスタマイズ構文、バベルプラグイン.
  • UE‐TEMPPLE‐ES 2015コンパイラ 用途


    インストール


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

    設定


    1 .


    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.config.js
    export default {
      // Build Configuration: https://go.nuxtjs.dev/config-build
      build: {
        loaders: {
          vue: {
            compiler: require('vue-template-babel-compiler')
          }
        },
      },
      // ...
    }
    

    Nuxtのデモプロジェクト。js 3 .


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

    Webpack


    API 問題とPRのための歓迎。