Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Lingyan000 opened this issue Feb 2, 2021 · 4 comments
Open

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

Lingyan000 opened this issue Feb 2, 2021 · 4 comments
Labels
bug

Comments

@Lingyan000
Copy link

Lingyan000 commented Feb 2, 2021 •
edited
Loading

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
      })
  }
  1. 执行 yarn serve 或 yarn build
  2. 修改 function createTransformer() {}
  3. 再次执行yarn serve 或 yarn build
  4. 发现修改后的函数并没有起作用，直到修改函数名称

What is expected?

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

What is actually happening?

不会对我所作的更改发生变化
@haoqunjiang
Copy link
Member

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

@Lingyan000
Copy link
Author

  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
Copy link
Member

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

@haoqunjiang haoqunjiang added the bug label Feb 4, 2021
@Lingyan000
Copy link
Author

知晓，感谢团队的付出

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@haoqunjiang @Lingyan000