From da4d0b2e2aa9b3fd96b6c1daa37cd52fd6528e73 Mon Sep 17 00:00:00 2001 From: Evan You Date: Thu, 3 May 2018 18:18:27 -0400 Subject: [PATCH] feat: relex transpile includes + new transpileDependencies option BREAKING CHANGE: To include a dependency for Babel transpilation, tapping babel-loader and adding .include() will no longer work. Use the new transpileDependencies option instead. --- docs/config.md | 4 ++++ packages/@vue/cli-plugin-babel/README.md | 13 +++++------ packages/@vue/cli-plugin-babel/index.js | 23 +++++++++++++++---- packages/@vue/cli-plugin-eslint/index.js | 5 ++-- packages/@vue/cli-plugin-typescript/README.md | 14 ----------- .../__tests__/tsPluginESLint.spec.js | 2 +- .../__tests__/tsPluginTSLint.spec.js | 4 ++-- packages/@vue/cli-plugin-typescript/index.js | 4 ---- packages/@vue/cli-service/lib/options.js | 4 ++++ 9 files changed, 37 insertions(+), 36 deletions(-) diff --git a/docs/config.md b/docs/config.md index 6764c812b..da608be2e 100644 --- a/docs/config.md +++ b/docs/config.md @@ -25,6 +25,10 @@ module.exports = { // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only compiler: false, + // babel-loader skips node_module deps by default. + // explicitly transpile a dependency with this option. + transpileDependencies: [/* string or regex */], + // tweak internal webpack configuration. // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md chainWebpack: () => {}, diff --git a/packages/@vue/cli-plugin-babel/README.md b/packages/@vue/cli-plugin-babel/README.md index 87935d78b..7e6c1048f 100644 --- a/packages/@vue/cli-plugin-babel/README.md +++ b/packages/@vue/cli-plugin-babel/README.md @@ -6,16 +6,15 @@ Uses Babel 7 + `babel-loader` + [@vue/babel-preset-app](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app) by default, but can be configured via `.babelrc` to use any other Babel presets or plugins. -By default, `babel-loader` is only applied to files inside `src` and `tests` directories. If you wish to explicitly transpile a dependency module, you will need to configure webpack in `vue.config.js`: +By default, `babel-loader` excludes files inside `node_modules` dependencies. If you wish to explicitly transpile a dependency module, you will need to add it to the `transpileDependencies` option in `vue.config.js`: ``` js module.exports = { - chainWebpack: config => { - config - .rule('js') - .include - .add(/module-to-transpile/) - } + transpileDependencies: [ + // can be string or regex + 'my-dep', + /other-dep/ + ] } ``` diff --git a/packages/@vue/cli-plugin-babel/index.js b/packages/@vue/cli-plugin-babel/index.js index 81fc14252..6d9939dc6 100644 --- a/packages/@vue/cli-plugin-babel/index.js +++ b/packages/@vue/cli-plugin-babel/index.js @@ -1,14 +1,27 @@ -module.exports = (api, options) => { - const useThreads = process.env.NODE_ENV === 'production' && options.parallel +module.exports = (api, { + parallel, + transpileDependencies +}) => { + const useThreads = process.env.NODE_ENV === 'production' && parallel const cacheDirectory = api.resolve('node_modules/.cache/cache-loader') api.chainWebpack(webpackConfig => { const jsRule = webpackConfig.module .rule('js') .test(/\.jsx?$/) - .include - .add(api.resolve('src')) - .add(api.resolve('tests')) + .exclude + .add(filepath => { + // check if this is something the user explicitly wants to transpile + if (transpileDependencies.some(dep => filepath.match(dep))) { + return false + } + // always trasnpile js in vue files + if (/\.vue\.jsx?$/.test(filepath)) { + return false + } + // Don't transpile node_modules + return /node_modules/.test(filepath) + }) .end() .use('cache-loader') .loader('cache-loader') diff --git a/packages/@vue/cli-plugin-eslint/index.js b/packages/@vue/cli-plugin-eslint/index.js index 51e6f9807..a27b33d71 100644 --- a/packages/@vue/cli-plugin-eslint/index.js +++ b/packages/@vue/cli-plugin-eslint/index.js @@ -5,9 +5,8 @@ module.exports = (api, { lintOnSave }) => { webpackConfig.module .rule('eslint') .pre() - .include - .add(api.resolve('src')) - .add(api.resolve('tests')) + .exclude + .add(/node_modules/) .end() .test(/\.(vue|(j|t)sx?)$/) .use('eslint-loader') diff --git a/packages/@vue/cli-plugin-typescript/README.md b/packages/@vue/cli-plugin-typescript/README.md index 833904b3f..74c1c8e6f 100644 --- a/packages/@vue/cli-plugin-typescript/README.md +++ b/packages/@vue/cli-plugin-typescript/README.md @@ -10,20 +10,6 @@ TypeScript can be configured via `tsconfig.json`. This plugin can be used alongside `@vue/cli-plugin-babel`. When used with Babel, this plugin will output ES2015 and delegate the rest to Babel for auto polyfill based on browser targets. -By default, `ts-loader` is only applied to files inside `src` and `tests` directories. If you wish to explicitly transpile a dependency module, you will need to configure webpack in `vue.config.js`: - -``` js -module.exports = { - chainWebpack: config => { - config - .module - .rule('ts') - .include - .add(/module-to-transpile/) - } -} -``` - ## Injected Commands If opted to use [TSLint](https://palantir.github.io/tslint/) during project creation, `vue-cli-service lint` will be injected. diff --git a/packages/@vue/cli-plugin-typescript/__tests__/tsPluginESLint.spec.js b/packages/@vue/cli-plugin-typescript/__tests__/tsPluginESLint.spec.js index 12869891a..d5eb77b22 100644 --- a/packages/@vue/cli-plugin-typescript/__tests__/tsPluginESLint.spec.js +++ b/packages/@vue/cli-plugin-typescript/__tests__/tsPluginESLint.spec.js @@ -3,7 +3,7 @@ jest.setTimeout(10000) const create = require('@vue/cli-test-utils/createTestProject') test('should work', async () => { - const project = await create('ts-lint', { + const project = await create('ts-eslint', { plugins: { '@vue/cli-plugin-eslint': { config: 'prettier' diff --git a/packages/@vue/cli-plugin-typescript/__tests__/tsPluginTSLint.spec.js b/packages/@vue/cli-plugin-typescript/__tests__/tsPluginTSLint.spec.js index 8109b6030..1e8ce4ad7 100644 --- a/packages/@vue/cli-plugin-typescript/__tests__/tsPluginTSLint.spec.js +++ b/packages/@vue/cli-plugin-typescript/__tests__/tsPluginTSLint.spec.js @@ -3,7 +3,7 @@ jest.setTimeout(10000) const create = require('@vue/cli-test-utils/createTestProject') test('should work', async () => { - const project = await create('ts-lint', { + const project = await create('ts-tslint', { plugins: { '@vue/cli-plugin-typescript': { tsLint: true @@ -34,7 +34,7 @@ test('should work', async () => { }) test('should not fix with --no-fix option', async () => { - const project = await create('ts-lint-nofix', { + const project = await create('ts-tslint-nofix', { plugins: { '@vue/cli-plugin-typescript': { tsLint: true diff --git a/packages/@vue/cli-plugin-typescript/index.js b/packages/@vue/cli-plugin-typescript/index.js index 2d7dfcb0a..aad7d9854 100644 --- a/packages/@vue/cli-plugin-typescript/index.js +++ b/packages/@vue/cli-plugin-typescript/index.js @@ -19,10 +19,6 @@ module.exports = (api, { const tsRule = config.module .rule('ts') .test(/\.tsx?$/) - .include - .add(api.resolve('src')) - .add(api.resolve('tests')) - .end() const vueLoader = config.module .rule('vue') diff --git a/packages/@vue/cli-service/lib/options.js b/packages/@vue/cli-service/lib/options.js index 94bd8bdfe..d88b0bc02 100644 --- a/packages/@vue/cli-service/lib/options.js +++ b/packages/@vue/cli-service/lib/options.js @@ -4,6 +4,7 @@ const schema = createSchema(joi => joi.object({ baseUrl: joi.string(), outputDir: joi.string(), compiler: joi.boolean(), + transpileDependencies: joi.array(), productionSourceMap: joi.boolean(), vueLoader: joi.object(), parallel: joi.boolean(), @@ -55,6 +56,9 @@ exports.defaults = () => ({ // boolean, use full build? compiler: false, + // deps to transpile + transpileDependencies: [/* string or regex */], + // vue-loader options vueLoader: { preserveWhitespace: false,