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.

Author: yyx990803

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: () => {},

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/
+  ]
 }
 ```
 

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')

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')

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.

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'

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

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')

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,