refactor: dropped babel

The `babel-loader` was replaced by `esbuild-loader`, providing a modern fast transformation experience. Babel deps were removed, leaving `@babel/parser` and `@babel/traverse` for attributes extraction of page component. BREAKING CHANGE: babel loader was removed. Signed-off-by: Chawye Hsu <[email protected]>
chawyehsu · Aug 24, 2023 · c02c56e · c02c56e
1 parent 5813b73
commit c02c56e
Show file tree

Hide file tree

Showing 8 changed files with 245 additions and 834 deletions.
diff --git a/packages/saber/babel.js b/packages/saber/babel.js
diff --git a/packages/saber/package.json b/packages/saber/package.json
@@ -3,7 +3,6 @@
   "version": "0.11.7",
   "description": "A simple yet powerful static site generator",
   "files": [
-    "/babel.js",
     "/types",
     "/dist",
     "/vue-app",
@@ -21,22 +20,18 @@
   "types": "types/index.d.ts",
   "license": "MIT",
   "dependencies": {
-    "@babel/core": "^7.5.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.5.4",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.5.0",
-    "@babel/preset-env": "^7.5.4",
-    "@babel/runtime": "^7.5.4",
+    "@babel/parser": "^7.22.11",
+    "@babel/traverse": "^7.22.11",
     "@egoist/postcss-loader": "^3.0.2",
     "@intervolga/optimize-cssnano-plugin": "^1.0.6",
-    "babel-loader": "8.3.0",
     "cac": "^6.5.1",
     "cache-loader": "^4.1.0",
     "chokidar": "^3.5.3",
     "css-loader": "^2.1.0",
     "cssnano": "^4.1.8",
     "devalue": "^2.0.0",
     "download-git-repo": "^2.0.0",
+    "esbuild-loader": "^4.0.1",
     "fast-deep-equal": "^2.0.1",
     "file-loader": "^6.2.0",
     "get-port": "^5.0.0",

diff --git a/packages/saber/src/babel/preset.js b/packages/saber/src/babel/preset.js
diff --git a/packages/saber/src/plugins/transformer-components.ts b/packages/saber/src/plugins/transformer-components.ts
@@ -1,6 +1,8 @@
 import { slash } from 'saber-utils'
+import { parseComponent } from 'vue-template-compiler'
 import { SaberPlugin } from '..'
 import { Page } from '../Pages'
+import parseAttributes from '../utils/parseAttributes'
 
 const getPageComponent = (page: Page) => {
   return `<script>
@@ -21,32 +23,38 @@ const getPageComponent = (page: Page) => {
   `
 }
 
+/**
+ * This plugin is used to transform `.vue` Vue SFC and `.js` files to pages.
+ * docs: http://127.0.0.1:3000/docs/pages.html
+ */
 const transformerComponentsPlugin: SaberPlugin = {
   name: 'builtin:transformer-components',
   apply: api => {
+    // Vue SFC transformer
     api.transformers.add('vue', {
       extensions: ['vue'],
       transform(page) {
-        const sfc = require('vue-template-compiler').parseComponent(page.content)
+        const sfc = parseComponent(page.content!)
         if (sfc.script) {
-          const { data } = require('../utils/parseAttributes')(
+          const attributes = parseAttributes(
             sfc.script.content,
-            page.internal.absolute
+            page.internal.absolute!
           )
-          Object.assign(page, data)
+          Object.assign(page, attributes)
         }
       },
       getPageComponent
     })
 
+    // .js transformer
     api.transformers.add('js', {
       extensions: ['js'],
       transform(page) {
-        const { data } = require('../utils/parseAttributes')(
-          page.content,
-          page.internal.absolute
+        const attributes = parseAttributes(
+          page.content!,
+          page.internal.absolute!
         )
-        Object.assign(page, data)
+        Object.assign(page, attributes)
       },
       getPageComponent
     })

diff --git a/packages/saber/src/utils/parseAttributes.js → packages/saber/src/utils/parseAttributes.ts b/packages/saber/src/utils/parseAttributes.js → packages/saber/src/utils/parseAttributes.ts
@@ -1,18 +1,13 @@
-// @ts-check
-const path = require('path')
-const resolveFrom = require('resolve-from')
-
-const babelDir = path.dirname(require.resolve('@babel/core/package'))
-const parser = require(resolveFrom(babelDir, '@babel/parser'))
-const traverse = require(resolveFrom(babelDir, '@babel/traverse'))
-const generator = require(resolveFrom(babelDir, '@babel/generator'))
+import parser from '@babel/parser'
+import traverse from '@babel/traverse'
 
 /**
- * Extract the `export const data` part from a page
+ * Extract the `export const [data|attributes]` part from a page
  * @param {string} content The content of a page
  * @param {string} filepath The absolute path to the path
+ * @returns {object} The extracted data object
  */
-module.exports = (content, filepath) => {
+export default (content: string, filepath: string): object => {
   const ast = parser.parse(content, {
     sourceFilename: filepath,
     sourceType: 'module',
@@ -21,16 +16,14 @@ module.exports = (content, filepath) => {
 
   let data = {}
 
-  traverse.default(ast, {
-    /**
-     * @param {any} path
-     */
-    ObjectExpression(path) {
+  traverse(ast, {
+    ObjectExpression(path: any) {
       const name =
         path.parent &&
         path.parent.type === 'VariableDeclarator' &&
         path.parent.id.name
 
+      // Only extract `export const [data|attributes] = {...}`
       if (!['attributes', 'data'].includes(name)) {
         return
       }
@@ -49,6 +42,7 @@ module.exports = (content, filepath) => {
       }
 
       const { confident, value } = path.evaluate()
+
       if (confident) {
         data = value
         path.node.properties = []
@@ -60,10 +54,5 @@ module.exports = (content, filepath) => {
     }
   })
 
-  const { code } = generator.default(ast)
-
-  return {
-    data,
-    code
-  }
+  return data
 }
diff --git a/packages/saber/src/webpack/babel-loader.js b/packages/saber/src/webpack/babel-loader.js
diff --git a/packages/saber/src/webpack/webpack.config.ts b/packages/saber/src/webpack/webpack.config.ts
@@ -69,15 +69,11 @@ export default function webpackConfig(api: Saber, { type }: { type: string }) {
     })
     .end()
     .oneOf('normal')
-    .use('babel-loader')
-    .loader(require.resolve('./babel-loader'))
+    .use('esbuild-loader')
+    .loader(require.resolve('esbuild-loader'))
     .options({
-      customLoaderOptions: {
-        distDir: api.resolveCache(),
-        cwd: api.resolveCwd(),
-        shouldCache: api.webpackUtils.shouldCache,
-        type
-      }
+      loader: 'js',
+      target: 'es2015'
     })
 
   config.plugin('timefix').use(timeFixPlugin)