diff --git a/lib/builder/webpack/base.js b/lib/builder/webpack/base.js index 71239229e1..8681d6647b 100644 --- a/lib/builder/webpack/base.js +++ b/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() diff --git a/lib/common/nuxt.config.js b/lib/common/nuxt.config.js index 2de998ad71..50e08ef430 100644 --- a/lib/common/nuxt.config.js +++ b/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: [], diff --git a/lib/common/options.js b/lib/common/options.js index a8fd6e2b8d..6494fe747f 100644 --- a/lib/common/options.js +++ b/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 } diff --git a/test/fixtures/with-config/nuxt.config.js b/test/fixtures/with-config/nuxt.config.js index 81891cfb67..68d5d8b53f 100644 --- a/test/fixtures/with-config/nuxt.config.js +++ b/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' diff --git a/test/unit/basic.dev.test.js b/test/unit/basic.dev.test.js index 4faf2703f2..32837300ae 100644 --- a/test/unit/basic.dev.test.js +++ b/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'))