"
使用ts-loader
与Webpack完全没有问题。我们的Vue.js非常大规模,我们有多页面SPA,使用Webpack作为我们的打包工具。你实际上不需要为ts-loader单独配置。看一下我们的Webpack配置(其中有三个ts-loader
实例):
"
const rules = [
{
test: /\.tsx?$/,
loader: 'ts-loader',
include: [...PATHS.shared, path.join(__dirname, 'node_modules')],
options: {
transpileOnly: isDev,
appendTsSuffixTo: [/\.vue$/],
instance: 'common',
configFile: path.join(__dirname, 'tsconfig.json')
}
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
include: [PATHS.app1],
options: {
transpileOnly: isDev,
appendTsSuffixTo: [/\.vue$/],
instance: 'app1',
configFile: path.join(PATHS.app1, 'tsconfig.json')
}
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
include: [PATHS.app2],
options: {
transpileOnly: isDev,
appendTsSuffixTo: [/\.vue$/],
instance: 'app2',
configFile: path.join(PATHS.app2, 'tsconfig.json')
}
}
];
回到您的问题,我已经成功使用@babel/preset-typescript
,但是我们不使用.vue
文件,因为在处理.vue
文件时会出现问题。 注意:在开发期间,我们将transpileOnly
设置为false。
如果您可以切换到使用带有@Component
装饰器的类语法并使用vue-template-loader, 那么您可以切换到使用Babel + TypeScript。 有一些小恶心的惊喜,例如不支持const enums
,命名空间等。
注意:使用
ts-loader
而不是
@babel/preset-typescript
有其自身的优势。与Webpack配合使用,
ts-loader
更易于hack。如果您需要支持Vue.js中的类型化JSX即TSX,则使用babel路线更为合理。如果您正在使用
.vue
文件,则没有明显的区别。
@babel/preset-typescript
处理.vue
文件的问题-我目前正在调查它们是否仍然存在以及它们有多严重。到目前为止,我还没有发现任何对我的应用程序造成影响的问题。 - AlexeyappendTsSuffixTo: [/\.vue$/]
解决了我几天以来一直在努力解决的问题。不确定为什么其他TypeScript+Vue+Webpack设置中没有出现这个问题。 - Mike Crowe