[英]Type-checking of Vue w/ Typescript but w/o Webpack/ts-loader
Since August 2018 it's possible to compile Typescript
code with Babel
and have type checking as a separate process. 自2018年8月以来,可以使用Babel
编译Typescript
代码并将类型检查作为单独的过程进行。
I wonder if it is possible to do type checking of custom file formats like .vue
with <script lang="ts">
sections w/o Webpack
/ ts-loader
? 我想知道是否可以对不带Webpack
/ ts-loader
<script lang="ts">
部分进行自定义文件格式(如.vue
类型检查? (I reckon in that case Typescript would need to support file preprocessing in order to be able to digest different file formats). (我认为在这种情况下,Typescript需要支持文件预处理,以便能够消化不同的文件格式)。
Right now I have to maintain a separate webpack configuration with ts-loader
and compile Vue.js project, though all I need is to type-check it. 现在,我只需要使用ts-loader
维护一个单独的webpack配置并编译Vue.js项目,尽管我需要做的只是对它进行类型检查。 So this approach looks more like a hack and overhead. 因此,这种方法看起来更像是hack和开销。
It is perfectly fine to use ts-loader
with Webpack. 在Webpack中使用ts-loader
是完全没问题的。 Our Vue.js is extremely large-scale and we have multipage SPA with Webpack as our bundler. 我们的Vue.js是非常大规模的,我们有多个SPA和Webpack作为我们的捆绑器。 You don't really need to have a separate configuration for ts-loader . 你真的不需要为ts-loader提供单独的配置。 Have a look at our Webpack config (three instances of 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')
}
}
];
Coming back to your question, I have had success with @babel/preset-typescript
but we do not use .vue
files as there are problems when processing .vue
files. 回到你的问题,我已经成功使用@babel/preset-typescript
.vue
但我们不使用.vue
文件,因为在处理.vue
文件时会出现问题 。 Note: We set transpileOnly
to false during development. 注意:在开发过程中,我们将transpileOnly
设置为false。
If you can switch to using class syntax with @Component
decorator and use vue-template-loader , then you can switch to using Babel + TypeScript. 如果您可以切换到使用@Component
装饰器的类语法并使用vue-template-loader ,那么您可以切换到使用Babel + TypeScript。 There are little nasty surprises like no support for const enums
, namespaces, etc. 有一些令人讨厌的惊喜,例如不支持const enums
,命名空间等。
Note: Using
ts-loader
over@babel/preset-typescript
has its own advantages. 注意:在@babel/preset-typescript
上使用ts-loader
有其自身的优点。 Coupled with Webpack,ts-loader
is more hackable. 与Webpack相结合,ts-loader
更具攻击性。 If you need typed JSX ie TSX support with Vue.js, then babel route makes more sense. 如果您需要使用Vue.js键入JSX即TSX支持,那么babel路由更有意义。 If you are using.vue
files, then there is no considerable difference. 如果使用的是.vue
文件,则没有太大的区别。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.