feat: babel support new syntax and fine tuning compile (#342)

docs/recipes/javascript.md

@@ -9,6 +9,8 @@ We use a sane default preset for Babel, basically it:
 - Compiles `object-rest-spread` to `Object.assign`.
 - Compiles `async/await` to Promise without regenerator using [babel-plugin-transform-async-to-promises](https://github.com/rpetrich/babel-plugin-transform-async-to-promises).
 - Compiles JSX.
+- Support [optional chaining](https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining) out of the box.
+- Support [nullish coalescing operator](https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator) out of the box.
 
 You can add a `.babelrc` file in your project to use your custom config instead. If you want to disable `.babelrc` in your project, pass `--no-babelrc` flag.
 

package.json

@@ -31,14 +31,15 @@
     "node 6"
   ],
   "dependencies": {
-    "@babel/core": "^7.2.2",
+    "@babel/core": "^7.9.6",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
     "@babel/plugin-proposal-object-rest-spread": "^7.3.1",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
     "@babel/plugin-transform-react-jsx": "^7.3.0",
-    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-env": "^7.9.6",
     "@babel/preset-typescript": "^7.1.0",
     "@rollup/plugin-replace": "^2.3.2",
-    "babel-plugin-transform-async-to-promises": "^0.8.4",
+    "babel-plugin-transform-async-to-promises": "^0.8.15",
     "chalk": "^2.4.2",
     "ora": "^3.0.0",
     "rollup": "^1.1.2",

src/babel/preset.ts

@@ -11,24 +11,22 @@ export default (
     minimal = process.env.BILI_MINIMAL
   } = {}
 ) => {
-  let presets: any[] = []
-  let plugins: any[] = []
-
-  presets = [
-    ...presets,
+  const presets = [
     !minimal && [
       require('@babel/preset-env').default,
       {
         modules: ENV === 'test' ? 'auto' : false,
-        exclude: ['transform-regenerator', 'transform-async-to-generator']
+        exclude: [
+          'transform-regenerator',
+          'transform-async-to-generator',
+          'proposal-object-rest-spread'
+        ]
       }
     ],
     require('@babel/preset-typescript')
   ].filter(Boolean)
 
-  plugins = [
-    ...plugins,
-    require('@babel/plugin-syntax-dynamic-import'),
+  const plugins = [
     [
       require('@babel/plugin-transform-react-jsx'),
       {
@@ -42,6 +40,8 @@ export default (
         loose: true
       }
     ],
+    [require('@babel/plugin-proposal-optional-chaining')],
+    [require('@babel/plugin-proposal-nullish-coalescing-operator')],
     [
       alterObjectAssign,
       {

src/index.ts

@@ -186,7 +186,9 @@ export class Bundler {
     // [1] https://github.com/egoist/bili/issues/305
     const getObjectHashIgnoreUnknownHack = (): boolean => {
       try {
-        const { version } = this.localRequire('rollup-plugin-typescript2/package.json')
+        const { version } = this.localRequire(
+          'rollup-plugin-typescript2/package.json'
+        )
         const semver = require('semver')
         return semver.lt(version, '0.26.0')
       } catch (e) {
@@ -299,7 +301,7 @@ export class Bundler {
 
     const env = Object.assign({}, config.env)
 
-    // drop precess.env.NODE_ENV from umd/iife
+    // drop process.env.NODE_ENV from umd/iife
     if (
       ['umd', 'umd-min', 'iife', 'iife-min'].includes(format) &&
       env.NODE_ENV === undefined

src/plugins/babel.ts

@@ -2,8 +2,8 @@ import babel from 'rollup-plugin-babel'
 import preset from '../babel/preset'
 import { BabelPresetOptions } from '../types'
 
-export default babel.custom((core: any) => {
-  const presetItem = core.createConfigItem(preset, {
+export default babel.custom(babelCore => {
+  const presetItem = babelCore.createConfigItem(preset, {
     type: 'preset'
   })
 
@@ -26,6 +26,7 @@ export default babel.custom((core: any) => {
       }
     },
 
+    // Passed Babel's 'PartialConfig' object.
     config(cfg: any, data: any) {
       if (cfg.hasFilesystemConfig()) {
         // Use the normal config

types.d.ts

@@ -6,7 +6,18 @@ declare module 'tinydate' {
   export = tinydate
 }
 
-declare module 'rollup-plugin-babel'
+declare module 'rollup-plugin-babel' {
+  import { createConfigItem } from '@babel/core'
+  interface BabelPlugin {
+    custom: (
+      callback: (
+        babelCore: { createConfigItem: typeof createConfigItem }
+      ) => any
+    ) => any
+  }
+  const babelPlugin: BabelPlugin
+  export default babelPlugin
+}
 
 declare module 'babel-plugin-alter-object-assign'