add babel options

egoist · Sep 20, 2018 · 8b7e387 · 8b7e387
1 parent 6ec28c0
commit 8b7e387
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 27 deletions.
diff --git a/packages/poi/lib/babel/preset.js b/packages/poi/lib/babel/preset.js
@@ -1,9 +1,10 @@
 const env = process.env.BABEL_ENV || process.env.NODE_ENV
 
-module.exports = (
-  context,
-  { jsx = 'react', jsxPragmaFrag = 'React.Fragment', loose = false } = {}
-) => {
+module.exports = (context, { jsx, jsxPragmaFrag, loose } = {}) => {
+  jsx = jsx || 'react'
+  jsxPragmaFrag = jsxPragmaFrag || 'React.Fragment'
+  loose = typeof loose === 'boolean' ? loose : false
+
   const presets = [
     [
       require.resolve('@babel/preset-env'),

diff --git a/packages/poi/lib/index.js b/packages/poi/lib/index.js
@@ -62,7 +62,8 @@ class Poi {
         publicPath: '/',
         pluginOptions: {},
         sourceMap: true,
-        minimize: 'auto'
+        minimize: 'auto',
+        babel: {}
       },
       this.config,
       {

diff --git a/packages/poi/lib/plugins/command-build.js b/packages/poi/lib/plugins/command-build.js
@@ -7,8 +7,8 @@ exports.extend = api => {
 
   setSharedCLIOptions(command)
   command.option(
-    'clean-out-dir',
-    'Clean output directory before bundling (default: true)'
+    'no-clean-out-dir',
+    `Don't clean output directory before bundling (default: true)`
   )
 
   if (api.options.command === 'build') {

diff --git a/packages/poi/lib/plugins/config-base.js b/packages/poi/lib/plugins/config-base.js
@@ -64,7 +64,16 @@ exports.extend = api => {
     const baseDir = api.resolve()
     require('../webpack/rules/css')(config, api, filenames)
     require('../webpack/rules/vue')(config, { baseDir })
-    require('../webpack/rules/babel')(config, { baseDir })
+    require('../webpack/rules/babel')(config, {
+      baseDir,
+      defaultPresetOptions: Object.assign(
+        {
+          jsx: api.config.jsx
+        },
+        api.config.babel.defaultPresetOptions
+      ),
+      transpileModules: api.config.babel.transpileModules
+    })
     require('../webpack/rules/graphql')(config)
     require('../webpack/rules/yaml')(config)
     require('../webpack/rules/toml')(config)

diff --git a/packages/poi/lib/plugins/utils/shared-cli-options.js b/packages/poi/lib/plugins/utils/shared-cli-options.js
@@ -1,12 +1,15 @@
 module.exports = command => {
   command
-    .option('inspect-webpack', {
-      desc: 'Print webpack config and quit (default: false)'
-    })
     .option('debug', {
       desc: 'Show debug output (default: false)'
     })
+    .option('inspect-webpack', {
+      desc: 'Print webpack config and quit (default: false)'
+    })
     .option('progress', {
       desc: 'Show build progress (default: true)'
     })
+    .option('jsx', {
+      desc: `Choose JSX parser (default: 'react')`
+    })
 }
diff --git a/packages/poi/lib/webpack/loaders/babel-loader.js b/packages/poi/lib/webpack/loaders/babel-loader.js
@@ -3,12 +3,7 @@ const logger = require('@poi/cli-utils/logger')
 
 module.exports = babelLoader.custom(babel => {
   const configs = new Set()
-  const babelPresetItem = babel.createConfigItem(
-    require.resolve('../../babel/preset'),
-    {
-      type: 'preset'
-    }
-  )
+  let babelPresetItem
 
   return {
     customOptions(opts) {
@@ -35,6 +30,17 @@ module.exports = babelLoader.custom(babel => {
         }
       } else {
         // Add our default preset
+        babelPresetItem =
+          babelPresetItem ||
+          babel.createConfigItem(
+            [
+              require.resolve('../../babel/preset'),
+              customOptions.defaultPresetOptions
+            ],
+            {
+              type: 'preset'
+            }
+          )
         options.presets = [babelPresetItem, ...options.presets]
       }
 

diff --git a/packages/poi/lib/webpack/rules/babel.js b/packages/poi/lib/webpack/rules/babel.js
@@ -1,8 +1,21 @@
-module.exports = (config, { baseDir }) => {
+module.exports = (
+  config,
+  { baseDir, transpileModules, defaultPresetOptions }
+) => {
   config.module
     .rule('js')
     .test(/\.jsx?$/)
     .include.add(filepath => {
+      if (Array.isArray(transpileModules)) {
+        const shouldTranspile = transpileModules.some(condition => {
+          condition =
+            typeof condition === 'string' ? new RegExp(condition) : condition
+          return filepath.match(condition)
+        })
+        if (shouldTranspile) {
+          return true
+        }
+      }
       // Don't include node_modules
       return !/node_modules/.test(filepath)
     })
@@ -12,7 +25,9 @@ module.exports = (config, { baseDir }) => {
     .options({
       // Options for our custom babel-loader
       // Not used for now
-      customLoaderOptions: {},
+      customLoaderOptions: {
+        defaultPresetOptions
+      },
       root: baseDir
     })
 }
diff --git a/packages/poi/package.json b/packages/poi/package.json
@@ -32,7 +32,7 @@
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-loader": "^8.0.0-beta.6",
     "babel-plugin-transform-vue-jsx": "^4",
-    "cac": "^5.0.10",
+    "cac": "^5.0.12",
     "chalk": "^2.4.1",
     "copy-webpack-plugin": "^4.5.2",
     "css-loader": "^1.0.0",

diff --git a/website/docs/config.md b/website/docs/config.md
@@ -91,6 +91,32 @@ Generating sourcemaps in production build is useful for error reporting, analysi
 
 Minimize bundled JS and CSS files.
 
+## babel.transpileModules
+
+- Type: `string[]` `RegExp[]`
+
+By default Babel would only transpile modules outside `node_modules` directory, however you can use this option to include certain modules.
+
+## babel.defaultPresetOptions
+
+- Type: `Object`
+
+Specify the options of the default Babel preset we use:
+
+- `jsx`: `default: 'react'` You can also set it to `'vue'` or any JSX pragma like `'h'` for Preact. This can be overridden via CLI flag `--jsx`.
+- `jsxPragma`: `default: 'React.createFragment'`
+- `loose`: `default: false` Enable loose transformation.
+
+Note that the default Babel preset will not be used if you're using a custom Babel config file, however you can still add the preset to your Babel config file if you want:
+
+```js
+module.exports = {
+  presets: [
+    ['module:poi/babel', defaultPresetOptions]
+  ]
+}
+```
+
 ## css.extract
 
 - Type: `boolean` `'auto'`

diff --git a/yarn.lock b/yarn.lock
@@ -1846,20 +1846,20 @@ bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
 
-cac@^5.0.10:
-  version "5.0.10"
-  resolved "https://registry.npmjs.org/cac/-/cac-5.0.10.tgz#311de657c839dee4da58582b816e1fe44d20e54f"
+cac@^5.0.11:
+  version "5.0.11"
+  resolved "https://registry.npmjs.org/cac/-/cac-5.0.11.tgz#92ad452c15893313551bc46e09cf9a5acb15484f"
   dependencies:
     chalk "^2.3.2"
+    joycon "^2.1.1"
     minimost "^1.1.0"
-    read-pkg-up "^2.0.0"
     redent "^2.0.0"
     string-width "^2.1.1"
     text-table "^0.2.0"
 
-cac@^5.0.11:
-  version "5.0.11"
-  resolved "https://registry.npmjs.org/cac/-/cac-5.0.11.tgz#92ad452c15893313551bc46e09cf9a5acb15484f"
+cac@^5.0.12:
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/cac/-/cac-5.0.12.tgz#037cd0afae0349d1759c20b651e6ec3413998e99"
   dependencies:
     chalk "^2.3.2"
     joycon "^2.1.1"