在vue-loader中对脚本进行类型检查

昝涛

2023-12-01

用于Vue加载程序的TypeScript加载程序 (TypeScript loader for Vue-loader)

Type-check your script in your Vue-loader. Easier importing .ts file in vue's SFC.

在Vue-loader中对脚本进行类型检查。在vue的SFC中更轻松地导入.ts文件。

安装 (Installation)

npm install vue-ts-loader

You will also need to install TypeScript if you have not already.

如果尚未安装TypeScript，则还需要安装。

npm install typescript

You also need install vue-loader and friends. Please refer to vue-loader's documentation.

您还需要安装vue-loader和朋友。请参考vue-loader的文档。

跑步 (Running)

Use webpack like normal, including webpack --watch and webpack-dev-server, or through another build system using the Node.js API.

像平常一样使用webpack，包括webpack --watch和webpack-dev-server ，或通过另一个使用Node.js API的构建系统。

兼容性 (Compatibility)

The current version is compatible with TypeScript 2.0.

当前版本与TypeScript 2.0兼容。

组态 (Configuration)

Create or update webpack.config.js like so:

像这样创建或更新webpack.config.js ：

module.exports = {
  entry: './app.vue',
  output: {
    filename: 'bundle.js'
  },
  resolve: {
    // Add `.ts` and `.vue` as a resolvable extension.
    extensions: ['', '.ts', '.vue']
  },
  module: {
    loaders: [
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      { test: /\.vue$/, loader: 'vue-loader' },
      { test: /\.tsx?$/, loader: 'vue-ts-loader' }
    ]
  },
  vue: {
    loaders: {
      ts: 'vue-ts-loader'
    },
    // important for cooperating with vue-loader
    esModule: true
  },
}

Add a tsconfig.json file.

添加一个tsconfig.json文件。

{
  "compilerOptions": {
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

The tsconfig.json file controls TypeScript-related options so that your IDE, the tsc command, and this loader all share the same options. TypeScript files from all subdirectories will get included except the ones matching exclude.

tsconfig.json文件控制与TypeScript相关的选项，以便您的IDE， tsc命令和此加载器都共享相同的选项。来自所有子目录的TypeScript文件将被包含在内，但与exclude匹配的文件除外。

无法在TypeScript编译时生成错误 (Failing the build on TypeScript compilation error)

When the build fails (i.e. at least one typescript compile error occured), vue-ts-loader does not propagate the build failure to webpack. The upshot of this is you can fail to notice an erroring build. This is inconvenient; particularly in continuous integration scenarios. If you want to ensure that the build failure is propogated it is advised that you make use of the webpack-fail-plugin. This plugin that will make the process return status code 1 when it finishes with errors in single-run mode. Et voilà! Build failure.

当构建失败(即，至少一个编译打字原稿发生错误)，VUE-TS-装载机不传播生成失败的WebPack。这样做的结果是您可能无法注意到错误的构建。这很不方便；特别是在持续集成方案中。如果要确保导致构建失败，建议您使用webpack-fail-plugin 。该插件在单次运行模式下以错误结束时将使进程返回状态代码1。等等！构建失败。

For more background have a read of this issue.

有关更多背景信息，请阅读此问题。

选件 (Options)

There are two types of options: TypeScript options (aka "compiler options") and loader options. TypeScript options should be set using a tsconfig.json file. Loader options can be set either using a query when specifying the loader or through the ts property in the webpack configuration.

有两种类型的选项：TypeScript选项(也称为“编译器选项”)和加载器选项。 TypeScript选项应使用tsconfig.json文件设置。可以在指定加载程序时使用查询或通过webpack配置中的ts属性来设置加载程序选项。

module.exports = {
  ...
  module: {
    loaders: [
      // specify option using query
      { test: /\.tsx?$/, loader: 'vue-ts-loader?compiler=ntypescript' }
    ]
  },
  // specify option using `ts` property
  ts: {
    compiler: 'ntypescript'
  }
}

transpileOnly (布尔值)(默认= false) (transpileOnly (boolean) (default=false))

If you want to speed up compilation significantly you can set this flag. However, many of the benefits you get from static type checking between different dependencies in your application will be lost. You should also set the isolatedModules TypeScript option if you plan to ever make use of this.

如果要大大加快编译速度，可以设置此标志。但是，您从应用程序中不同依赖项之间的静态类型检查中获得的许多好处将丢失。如果打算使用此功能，则还应该设置isolatedModules TypeScript选项。

无声(布尔值)(默认= false) (silent (boolean) (default=false))

If true, no console.log messages will be emitted. Note that most error messages are emitted via webpack which is not affected by this flag.

如果为true，则不会发出console.log消息。请注意，大多数错误消息都是通过webpack发出的，不受此标志的影响。

ignoreDiagnostics (number [])(默认= []) (ignoreDiagnostics (number[]) (default=[]))

You can squelch certain TypeScript errors by specifying an array of diagnostic codes to ignore.

您可以通过指定要忽略的诊断代码数组来抑制某些TypeScript错误。

编译器(字符串)(默认='typescript') (compiler (string) (default='typescript'))

Allows use of TypeScript compilers other than the official one. Should be set to the NPM name of the compiler, eg ntypescript.

允许使用非官方的TypeScript编译器。应该设置为编译器的NPM名称，例如ntypescript 。

configFileName (字符串)(默认='tsconfig.json') (configFileName (string) (default='tsconfig.json'))

Allows you to specify a custom configuration file.

允许您指定自定义配置文件。

editorOptions (对象)(默认= {}) (compilerOptions (object) (default={}))

Allows overriding TypeScript options. Should be specified in the same format as you would do for the compilerOptions property in tsconfig.json.

允许覆盖TypeScript选项。应以同样的格式指定，你会在做compilerOptions在tsconfig.json财产。

实例(字符串) (instance (string))

Advanced option to force files to go through different instances of the TypeScript compiler. Can be used to force segregation between different parts of your code.

高级选项，用于强制文件通过TypeScript编译器的不同实例。可用于强制在代码的不同部分之间进行隔离。

加载其他资源和代码拆分 (Loading other resources and code splitting)

Loading css and other resources is possible but you will need to make sure that you have defined the require function in a declaration file.

可以加载CSS和其他资源，但是您需要确保已在声明文件中定义了require函数。

declare var require: {
    <T>(path: string): T;
    (paths: string[], callback: (...modules: any[]) => void): void;
    ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
};

Then you can simply require assets or chunks per the webpack documentation.

然后，您只需按照webpack文档要求资产或大块即可。

require('!style!css!./style.css');

翻译自: https://vuejsexamples.com/type-check-your-script-in-your-vue-loader/