diff --git a/README.md b/README.md
index 987a6fe..731eda9 100644
--- a/README.md
+++ b/README.md
@@ -148,7 +148,7 @@ This is because the `vue-template-compiler` actually supports `.` symbols in slo
 
 This module helps templates to support the latest ECMAScript syntax, such as [Optional Chaining](https://github.com/tc39/proposal-optional-chaining) and [Nullish coalescing Operator](https://github.com/tc39/proposal-nullish-coalescing) proposals.
 
-Before you can use it, you need to **make sure** that [`esbuild`](https://www.npmjs.com/package/esbuild) have been installed in your project. To make it easier to manage versions, `esbuild` is not included in the dependencies by default.
+Before you can use it, you need to **make sure** that either [`esbuild`](https://www.npmjs.com/package/esbuild) or [`Babel`](https://www.npmjs.com/package/@babel/core) have been installed in your project. To make it easier to manage versions, `esbuild` or `@babel/core` are not included in the dependencies by default.
 
 ```vue
 <template>
@@ -184,7 +184,7 @@ with (this) {
 
 By default, this module **does not inherit any Babel configuration** from the current project.
 
-#### Why use `esbuild` instead of Babel?
+#### Why `esbuild` is more recommended than Babel?
 
 Simply, to reduce **configuration costs**. When using Babel as a transformer, not only we should care about the preset or plugin you need to use, but that configuration may become obsolete with new syntax.
 
diff --git a/modules/syntax-esbuild.js b/modules/syntax-esbuild.js
new file mode 100644
index 0000000..c2445ae
--- /dev/null
+++ b/modules/syntax-esbuild.js
@@ -0,0 +1,10 @@
+const esbuild = require('esbuild')
+const trimEnd = require('lodash.trimend')
+const transform = require('./syntax-transform')
+
+module.exports = transform(code => {
+  const result = esbuild.transformSync(`(function(){return ${code}})`, {
+    target: 'es2019',
+  })
+  return trimEnd(result.code, ';\n')
+})
diff --git a/modules/syntax.js b/modules/syntax.js
index c2445ae..5d97392 100644
--- a/modules/syntax.js
+++ b/modules/syntax.js
@@ -1,10 +1,19 @@
-const esbuild = require('esbuild')
-const trimEnd = require('lodash.trimend')
-const transform = require('./syntax-transform')
+function hasModule(mod) {
+  try {
+    require(mod)
+    return true
+    // eslint-disable-next-line unicorn/prefer-optional-catch-binding
+  } catch (err) {
+    return false
+  }
+}
 
-module.exports = transform(code => {
-  const result = esbuild.transformSync(`(function(){return ${code}})`, {
-    target: 'es2019',
-  })
-  return trimEnd(result.code, ';\n')
-})
+module.exports = (() => {
+  if (hasModule('esbuild')) {
+    return require('./syntax-esbuild')
+  }
+  if (hasModule('@babel/core')) {
+    return require('./syntax-babel')
+  }
+  return {}
+})()
diff --git a/package-lock.json b/package-lock.json
index 44237b1..ff779e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,17 @@
         "vue-template-compiler": "^2.6.14"
       },
       "peerDependencies": {
+        "@babel/core": ">=7.0.0",
+        "esbuild": ">=0.14.3",
         "vue-template-compiler": "^2.6.14"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        }
       }
     },
     "node_modules/@babel/code-frame": {
diff --git a/package.json b/package.json
index d721252..3283650 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,16 @@
     "lodash.trimend": "^4.5.1"
   },
   "peerDependencies": {
+    "@babel/core": ">=7.0.0",
+    "esbuild": ">=0.5.0",
     "vue-template-compiler": "^2.6.14"
+  },
+  "peerDependenciesMeta": {
+    "@babel/core": {
+      "optional": true
+    },
+    "esbuild": {
+      "optional": true
+    }
   }
 }