typescript - 如何在打字稿项目中使用带有打字稿代码的git子模块

Question

我正在开发一个 VueJS 项目，该项目根据环境变量使用不同的颜色和其他一些东西。这些值包含在我作为子模块添加的另一个存储库中。所以我项目中的结构是：

• 我的项目
  • 子模块
  • 节点模块
  • 上市
  • 源代码

为了完成这项工作，我将其包含在vue.config.js：

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('@theme', path.resolve('the-submodule/' + process.env.VUE_APP_THEME))
  },
...

我像这样使用它，例如plugins/vuetify.ts：

import Vue from 'vue'
import Vuetify from 'vuetify/lib/framework'
import colors from '@theme/colors'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    themes: {
      light: {
        ...colors
      }
    }
  }
})

或在router/index.ts：

import texts from '@theme/texts'

...

router.afterEach((to) => {
  Vue.nextTick(() => {
    document.title = to.meta.title ? `${texts.appName} | ${to.meta.title}` : texts.appName
  })
})

虽然这确实可以编译并且可以工作，但在编译过程中我仍然会遇到错误：

ERROR in /Users/sme/projects/aedifion-frontend/src/plugins/vuetify.ts(4,20):
4:20 Cannot find module '@theme/colors' or its corresponding type declarations.
    2 | import Vue from 'vue'
    3 | import Vuetify from 'vuetify/lib/framework'
  > 4 | import colors from '@theme/colors'
      |                    ^
    5 | 
    6 | Vue.use(Vuetify)
    7 | 
ERROR in /Users/sme/projects/aedifion-frontend/src/router/index.ts(12,19):
12:19 Cannot find module '@theme/texts' or its corresponding type declarations.
  > 12 | import texts from '@theme/texts'
       |                   ^

这些是主题中的文件示例：

the-submodule/some-theme/colors.ts：

import { Colors } from '../types'

export default {
  accent: '#288946',
  error: '#e60046',
  info: '#969196',
  primary: '#007982',
  secondary: '#96BE0D',
  success: '#a0af69',
  warning: '#fab450'
} as Colors

the-submodule/some-theme/texts.ts：

import { Texts } from '../types'

export default {
  appName: 'MyApp'
} as Texts

the-submodule/types.ts：

export interface Colors {
  accent: string;
  error: string;
  info: string;
  primary: string;
  secondary: string;
  success: string;
  warning: string;
}

export interface Texts {
  appName: string;
}

我还为每种类型或所有类型创建了不同版本的.d.ts文件。the-submodule

我已经尝试了几乎所有我能找到的东西。我如何摆脱这些错误？

编辑：

当我明确映射路径时，它可以工作tsconfig.json：

{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "src/*"
      ],
      "@theme/*": [
        "the-submodule/some-theme/*"
      ]
    },

所以我想问题是：如何在tsconfig-json不明确添加some-theme到路径的情况下让路径映射工作？

标签： typescriptvue.jswebpack