diff --git a/packages/@vue/cli-plugin-babel/__tests__/transpileDependencies.spec.js b/packages/@vue/cli-plugin-babel/__tests__/transpileDependencies.spec.js new file mode 100644 index 0000000000..2fadca6051 --- /dev/null +++ b/packages/@vue/cli-plugin-babel/__tests__/transpileDependencies.spec.js @@ -0,0 +1,67 @@ +jest.setTimeout(30000) + +const { defaultPreset } = require('@vue/cli/lib/options') +const create = require('@vue/cli-test-utils/createTestProject') + +let project + +beforeAll(async () => { + project = await create('babel-transpile-deps', defaultPreset) + + await project.write( + 'node_modules/external-dep/package.json', + `{ "name": "external-dep", "version": "1.0.0", "main": "index.js" }` + ) + + await project.write( + 'node_modules/external-dep/index.js', + `const test = () => "__TEST__";\nexport default test` + ) + + let $packageJson = await project.read('package.json') + + $packageJson = JSON.parse($packageJson) + $packageJson.dependencies['external-dep'] = '1.0.0' + $packageJson = JSON.stringify($packageJson) + + await project.write( + 'package.json', + $packageJson + ) + + let $mainjs = await project.read('src/main.js') + + $mainjs = `import test from 'external-dep'\n${$mainjs}\nconsole.log(test())` + + await project.write( + 'src/main.js', + $mainjs + ) +}) + +test('dep from node_modules should not been transpiled', async () => { + const { stdout } = await project.run('vue-cli-service build') + + let $vendorjs = stdout.match(/(js\/vendors~app\.[^.]+\.js)/)[1] + + $vendorjs = `dist/${$vendorjs}` + $vendorjs = await project.read($vendorjs) + + expect($vendorjs).toMatch('() => "__TEST__"') +}) + +test('dep from node_modules should been transpiled', async () => { + await project.write( + 'vue.config.js', + `module.exports = { transpileDependencies: ['external-dep'] }` + ) + + const { stdout } = await project.run('vue-cli-service build') + + let $vendorjs = stdout.match(/(js\/vendors~app\.[^.]+\.js)/)[1] + + $vendorjs = `dist/${$vendorjs}` + $vendorjs = await project.read($vendorjs) + + expect($vendorjs).toMatch('return "__TEST__"') +}) diff --git a/packages/@vue/cli/lib/Generator.js b/packages/@vue/cli/lib/Generator.js index fa35a4b6a0..b1c2e24329 100644 --- a/packages/@vue/cli/lib/Generator.js +++ b/packages/@vue/cli/lib/Generator.js @@ -88,9 +88,15 @@ module.exports = class Generator { for (const key in this.pkg) { extract(key) } - } else if (!process.env.VUE_CLI_TEST) { - // by default, always extract vue.config.js - extract('vue') + } else { + if (!process.env.VUE_CLI_TEST) { + // by default, always extract vue.config.js + extract('vue') + } + // always extract babel.config.js as this is the only way to apply + // project-wide configuration even to dependencies. + // TODO: this can be removed when Babel supports root: true in package.json + extract('babel') } } diff --git a/packages/@vue/cli/lib/util/configTransforms.js b/packages/@vue/cli/lib/util/configTransforms.js index e0b4ffba2d..99fed4e9c9 100644 --- a/packages/@vue/cli/lib/util/configTransforms.js +++ b/packages/@vue/cli/lib/util/configTransforms.js @@ -77,7 +77,7 @@ function transformYAML (value, filename, source) { module.exports = { vue: makeJSTransform('vue.config.js'), - babel: makeJSONTransform('.babelrc'), + babel: makeJSTransform('babel.config.js'), postcss: makeMutliExtensionJSONTransform('.postcssrc', true), eslintConfig: makeMutliExtensionJSONTransform('.eslintrc', true), jest: makeJSTransform('jest.config.js')