使用 getCustomTransformers 的时候发生的一些问题

[Lingyan000]

Version

4.5.10

Environment info

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
  Binaries:
    Node: 14.8.0 - D:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - D:\Program Files\nodejs\yarn.CMD
    npm: 6.14.5 - D:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 88.0.4324.104
    Edge: Spartan (44.19041.423.0), Chromium (88.0.705.56)
  npmPackages:
    @icon-park/vue-next: ^1.2.2 => 1.2.2
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.0
    @vue/babel-plugin-jsx:  1.0.1
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.10
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  4.5.10
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.10
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.10
    @vue/cli-plugin-router: ~4.5.0 => 4.5.10
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.10
    @vue/cli-plugin-vuex: ~4.5.0 => 4.5.10
    @vue/cli-service: ~4.5.0 => 4.5.10
    @vue/cli-shared-utils:  4.5.10
    @vue/compiler-core:  3.0.5
    @vue/compiler-dom:  3.0.5
    @vue/compiler-sfc: ^3.0.0 => 3.0.5
    @vue/compiler-ssr:  3.0.5
    @vue/component-compiler-utils:  3.2.0
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0
    @vue/eslint-config-typescript: ^5.0.2 => 5.1.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/reactivity:  3.0.5
    @vue/runtime-core:  3.0.5
    @vue/runtime-dom:  3.0.5
    @vue/shared:  3.0.5
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^7.0.0-0 => 7.4.1
    typescript: ~3.9.3 => 3.9.7 (3.9.3)
    vue: ^3.0.0 => 3.0.5
    vue-class-component: ^8.0.0-0 => 8.0.0-rc.1
    vue-eslint-parser:  7.3.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.6 (16.1.2)
    vue-router: ^4.0.0-0 => 4.0.2
    vue-style-loader:  4.1.2
    vue-template-es2015-compiler:  1.9.1
    vuex: ^4.0.0-0 => 4.0.0-rc.2
    vuex-module-decorators: ^1.0.1 => 1.0.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. 在 vue.config.js 中配置

chainWebpack: config => {
    config.module
      .rule('ts')
      .use('ts-loader')
      .tap(options => {
        options = merge(options, {
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [
              createTransformer(), // <- 关键在这里 Look at me
            ]
          })
        })
        return options
      })
  }

2. 执行 yarn serve 或 yarn build
3. 修改 function createTransformer() {}
4. 再次执行yarn serve 或 yarn build
5. 发现修改后的函数并没有起作用，直到修改函数名称

What is expected?

希望能即时更新函数内容的更改

What is actually happening?

不会对我所作的更改发生变化

[haoqunjiang]

1. 麻烦提供一下可以运行的复现代码
2. 试试配置 parallel: false，ts-loader 的文档里也有提到在用多线程构建时 getCustomTransformers 应该设置为字符串 https://github.com/TypeStrong/ts-loader#getcustomtransformers

[Lingyan000]

1. 我一直是 parallel: false

2. 已尝试修改为

   getCustomTransformers: path.join(
   __dirname,
   './test.js'
   )
   
   /* test.js */
   const ts = require('typescript')
   
   function createTransformer() {
    return function(context) {
      const visitor = function(node) {
        return ts.visitEachChild(node, visitor, context)
      }
      return function(node) {
        return ts.visitNode(node, visitor)
      }
    }
   }
   
   module.exports = () => ({
    before: [createTransformer()]
   })
   

3. 当我输入yarn serve后这样修改test.js

   ...
   function createTransformer() {
    return function(context) {
      const visitor = function(node) {
        return ts.TvisitEachChild(node, visitor, context) /* 一个本来会导致错误的修改 */
      }
   ...
    }
   }
   

4. 当我结束serve后重新执行yarn serve，此时命令行并没有输出错误，一切正常运行

[haoqunjiang]

试了一下，是 CLI 默认的缓存配置不对，没有把 vue.config.js 的变化考虑在内，所以第二次运行时直接用了缓存。 rm -rf node_modules/.cache 后再运行是会报错的。

[Lingyan000]

知晓，感谢团队的付出