Type-check your script in your Vue-loader. Easier importing .ts file in vue's SFC.
在Vue-loader中对脚本进行类型检查。 在vue的SFC中更轻松地导入.ts文件。
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的文档 。
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的构建系统。
The current version is compatible with TypeScript 2.0.
当前版本与TypeScript 2.0兼容。
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
},
}
{
"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
匹配的文件除外。
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.
有关更多背景信息,请阅读此问题 。
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'
}
}
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选项。
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发出的,不受此标志的影响。
You can squelch certain TypeScript errors by specifying an array of diagnostic codes to ignore.
您可以通过指定要忽略的诊断代码数组来抑制某些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
。
Allows you to specify a custom configuration file.
允许您指定自定义配置文件。
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财产。
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 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.
require('!style!css!./style.css');
翻译自: https://vuejsexamples.com/type-check-your-script-in-your-vue-loader/