feat(compiler): add js/react compiler

xuasir · Feb 7, 2021 · 452b206 · 452b206
1 parent fa2aa7b
commit 452b206
Show file tree

Hide file tree

Showing 11 changed files with 59 additions and 942 deletions.
diff --git a/packages/cli-plugin-rollup-compiler/package.json b/packages/cli-plugin-rollup-compiler/package.json
@@ -30,18 +30,11 @@
     "@rollup/plugin-babel": "^5.2.3",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.1.0",
-    "@vue/compiler-sfc": "^3.0.5",
     "@xus/babel-preset": "^0.1.6",
     "@xus/cli": "^0.0.1",
     "@xus/cli-plugin-bundler-rollup": "^0.0.1",
     "chalk": "^4.1.0",
-    "deepmerge": "^4.2.2",
-    "rollup": "^2.38.3",
-    "rollup-plugin-alias": "^2.2.0",
-    "rollup-plugin-node-builtins": "^2.1.2",
-    "rollup-plugin-node-globals": "^1.4.0",
-    "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-vue": "^6.0.0"
+    "rollup": "^2.38.3"
   },
   "devDependencies": {
     "@types/rollup-plugin-node-builtins": "^2.1.1",

diff --git a/packages/cli-plugin-rollup-compiler/src/commands.ts b/packages/cli-plugin-rollup-compiler/src/commands.ts
@@ -1,19 +1,16 @@
 import type { IPluginAPI } from '@xus/cli'
-import { compileJs, compileTs, compileReact, compileVue } from './compiler'
+import { compileJs } from './compiler'
 
-export async function build(cmd: string, api: IPluginAPI): Promise<void> {
+export type Cmds = 'js' | 'react'
+export const commands = ['js', 'react']
+
+export async function build(cmd: Cmds, api: IPluginAPI): Promise<void> {
   switch (cmd) {
     case 'js':
       await compileJs(api)
       break
-    case 'ts':
-      await compileTs(api)
-      break
     case 'react':
-      await compileReact(api)
-      break
-    case 'vue':
-      await compileVue(api)
+      await compileJs(api, true)
       break
   }
 }
diff --git a/packages/cli-plugin-rollup-compiler/src/compiler/compileJs.ts b/packages/cli-plugin-rollup-compiler/src/compiler/compileJs.ts
@@ -1,19 +1,22 @@
 import type { IPluginAPI } from '@xus/cli'
-import createBabelConfig from '../config/babel.config'
+import createBabelConfig, { Preset } from '../config/babel.config'
 // rollup plugins
-import nodeResolvePlugin from '@rollup/plugin-node-resolve'
+import { nodeResolve as nodeResolvePlugin } from '@rollup/plugin-node-resolve'
 import commonjsPlugin from '@rollup/plugin-commonjs'
 import { babel } from '@rollup/plugin-babel'
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import aliasPlugin from 'rollup-plugin-alias'
 
-export async function compileJs(api: IPluginAPI): Promise<void> {
+export async function compileJs(
+  api: IPluginAPI,
+  isReact = false
+): Promise<void> {
   // 1.1 load babel config
+  let presetName = '@xus/babel-preset'
+  isReact && (presetName = '@xus/babel-preset/lib/react')
+
   const babelConfig =
     (await api.ConfigManager.loadConfig(
       api.PathManager.getPath('babel.config.js')
-    )) || createBabelConfig('@xus/babel-preset')
+    )) || createBabelConfig(presetName as Preset)
   // 1.2 register common config
   api.RollupManager.registerChainFn((rollupChain) => {
     rollupChain
@@ -23,18 +26,25 @@ export async function compileJs(api: IPluginAPI): Promise<void> {
       .end()
 
       .plugin('nodeResolve')
-      .use(nodeResolvePlugin, [{ preferBuiltins: true }])
+      .use(nodeResolvePlugin, [
+        { preferBuiltins: true, extensions: ['.js', '.jsx', '.json'] }
+      ])
       .before('commonjs')
       .end()
 
       .plugin('commonjs')
       .use(commonjsPlugin, [{ sourceMap: false }])
       .before('babel')
       .end()
-
-      .plugin('alias')
-      .use(aliasPlugin, [{ '@': api.PathManager.getPath('src') }])
-      .end()
+    // react set
+    if (isReact) {
+      rollupChain
+        .when('all')
+        .output.globals({ react: 'React', 'react-dom': 'ReactDom' })
+        .end()
+        .external.set('react')
+        .set('react-dom')
+    }
   }, true)
   // 1.3 register babel config
   api.RollupManager.registerChainFn((rollupChain) => {
@@ -61,13 +71,19 @@ export async function compileJs(api: IPluginAPI): Promise<void> {
       .end()
 
     // base babel
+    // set external
     rollupChain
-      .when('all')
+      .when('esm-bundler')
       .plugin('babel')
       .use(babel, [{ ...babelConfig, babelHelpers: 'runtime' }])
-    // set external
-    rollupChain.when('esm-bundler').external.set(/^@babel\/runtime/)
-    rollupChain.when('node').external.set(/^@babel\/runtime/)
+      .end()
+      .external.set(/^@babel\/runtime/)
+    rollupChain
+      .when('node')
+      .plugin('babel')
+      .use(babel, [{ ...babelConfig, babelHelpers: 'runtime' }])
+      .end()
+      .external.set(/^@babel\/runtime/)
     // set full pkg babel
     rollupChain
       .when('global')

diff --git a/packages/cli-plugin-rollup-compiler/src/compiler/compileReact.ts b/packages/cli-plugin-rollup-compiler/src/compiler/compileReact.ts
diff --git a/packages/cli-plugin-rollup-compiler/src/compiler/compileTs.ts b/packages/cli-plugin-rollup-compiler/src/compiler/compileTs.ts
diff --git a/packages/cli-plugin-rollup-compiler/src/compiler/compileVue.ts b/packages/cli-plugin-rollup-compiler/src/compiler/compileVue.ts
diff --git a/packages/cli-plugin-rollup-compiler/src/compiler/index.ts b/packages/cli-plugin-rollup-compiler/src/compiler/index.ts
@@ -1,5 +1 @@
-export const compileCmds = ['js', 'ts', 'react', 'vue']
 export * from './compileJs'
-export * from './compileTs'
-export * from './compileReact'
-export * from './compileVue'
diff --git a/packages/cli-plugin-rollup-compiler/src/config/babel.config.ts b/packages/cli-plugin-rollup-compiler/src/config/babel.config.ts
@@ -1,7 +1,4 @@
-type Preset =
-  | '@xus/babel-preset'
-  | '@xus/babel-preset/lib/react'
-  | '@xus/babel-preset/lib/vue'
+export type Preset = '@xus/babel-preset' | '@xus/babel-preset/lib/react'
 
 export default (preset: Preset) => ({
   exclude: 'node_modules/**',

diff --git a/packages/cli-plugin-rollup-compiler/src/index.ts b/packages/cli-plugin-rollup-compiler/src/index.ts
@@ -4,37 +4,38 @@ import type {
   CompileTargets
 } from '@xus/cli-plugin-bundler-rollup'
 import type { FinalArgs } from './types'
-import chalk from 'chalk'
 import { error } from '@xus/cli'
-import { compileCmds } from './compiler'
-import { build } from './commands'
+import chalk from 'chalk'
+import { build, Cmds, commands } from './commands'
 
 export default function (api: IPluginAPI, projectConfig: ProjectConfig): void {
   api.registerCommand(
-    'rollup',
+    'rollup-js',
     {
       usage: 'xus rollup <command> [options]',
       desc: 'a js/ts/react/vue bundler based on rollup',
       options: {
+        vue: 'rollup vue based on js',
+        react: 'rollup react based on js',
         '--targets': 'point build target',
         '--sourcemap': 'generate sourcemap',
         '--prod': 'able production'
       }
     },
     async (args: FinalArgs) => {
       // valid buildCmd
-      const buildCmd = args._.shift()
-      if (!buildCmd || !compileCmds.includes(buildCmd)) {
+      const buildCmd: Cmds = (args._.shift() || 'js') as Cmds
+      if (!buildCmd || !commands.includes(buildCmd)) {
         error(
           `\n  invalid command: ${chalk.red(buildCmd)}` +
             `\n  support commands: ${chalk.green(
-              `${compileCmds.join(' / ')}`
+              `${commands.filter((cmd) => cmd != 'js').join(' / ')}`
             )}\n`
         )
         process.exit(1)
       }
-      // set env
       if (args?.prod) {
+        // set env
         api.EnvManager.mode = 'production'
       } else {
         api.EnvManager.mode = 'development'

diff --git a/packages/cli-plugin-rollup-compiler/src/types/override.ts b/packages/cli-plugin-rollup-compiler/src/types/override.ts
@@ -4,4 +4,5 @@ export type FinalArgs = {
   targets?: string
   sourcemap?: string
   prod?: boolean
+  react?: boolean
 } & Args