Merge pull request #3341 from clarkdo/babel_whitelisting

feat: make babel-loader exclude configurable

lib/builder/webpack/base.js

@@ -139,10 +139,18 @@ export default class WebpackBaseConfig {
       },
       {
         test: /\.jsx?$/,
-        exclude: file => (
-          /node_modules/.test(file) &&
-          !/\.vue\.js/.test(file)
-        ),
+        exclude: file => {
+          // not exclude files outside node_modules
+          if (/node_modules/.test(file)) {
+            for (let pkg of this.options.build.transpile) {
+              // item in transpile can be string or regex object
+              if (new RegExp(pkg).test(file)) {
+                return false
+              }
+            }
+            return true
+          }
+        },
         use: perfLoader.pool('js', {
           loader: 'babel-loader',
           options: this.getBabelOptions()

lib/common/nuxt.config.js

@@ -63,6 +63,7 @@ export default {
       babelrc: false,
       cacheDirectory: undefined
     },
+    transpile: [], // Name of NPM packages to be transpiled
     vueLoader: {},
     postcss: {},
     templates: [],

lib/common/options.js

@@ -187,5 +187,9 @@ Options.from = function (_options) {
   if (options.dev) {
     options.build.extractCSS = false
   }
+
+  // include SFCs in node_modules
+  options.build.transpile = [/\.vue\.js/].concat(options.build.transpile || [])
+
   return options
 }

test/fixtures/with-config/nuxt.config.js

@@ -62,6 +62,7 @@ export default {
         return null // Coverage: Return null, so defaults will be used.
       }
     },
+    transpile: 'vue-test',
     extend(config, options) {
       return Object.assign({}, config, {
         devtool: 'nosources-source-map'

test/unit/basic.dev.test.js

@@ -4,6 +4,7 @@ let port
 const url = route => 'http://localhost:' + port + route
 
 let nuxt = null
+let transpile = null
 
 describe('basic dev', () => {
   beforeAll(async () => {
@@ -12,23 +13,32 @@ describe('basic dev', () => {
       debug: true,
       buildDir: '.nuxt-dev',
       build: {
-        stats: 'none'
+        stats: 'none',
+        transpile: [
+          'vue\\.test\\.js',
+          /vue-test/
+        ],
+        extend({ module: { rules } }, { isClient }) {
+          if (isClient) {
+            const babelLoader = rules.find(loader => loader.test.test('.jsx'))
+            transpile = (file) => !babelLoader.exclude(file)
+          }
+        }
       }
     })
     nuxt = new Nuxt(config)
-    new Builder(nuxt).build()
+    await new Builder(nuxt).build()
     port = await getPort()
     await nuxt.listen(port, 'localhost')
   })
 
-  // TODO: enable test when style-loader.js:60 was resolved
-  // test.serial('/extractCSS', async t => {
-  //   const window = await nuxt.renderAndGetWindow(url('/extractCSS'))
-  //   const html = window.document.head.innerHTML
-  //   t.true(html.includes('vendor.css'))
-  //   t.true(!html.includes('30px'))
-  //   t.is(window.getComputedStyle(window.document.body).getPropertyValue('font-size'), '30px')
-  // })
+  test('Config: build.transpile', async () => {
+    expect(transpile('vue-test')).toBe(true)
+    expect(transpile('node_modules/test.js')).toBe(false)
+    expect(transpile('node_modules/vue-test')).toBe(true)
+    expect(transpile('node_modules/vue.test.js')).toBe(true)
+    expect(transpile('node_modules/test.vue.js')).toBe(true)
+  })
 
   test('/stateless', async () => {
     const window = await nuxt.renderAndGetWindow(url('/stateless'))