{"id":13429190,"url":"https://github.com/HerringtonDarkholme/vue-ts-loader","last_synced_at":"2025-03-16T03:31:13.643Z","repository":{"id":65412474,"uuid":"73137167","full_name":"HerringtonDarkholme/vue-ts-loader","owner":"HerringtonDarkholme","description":"Type-check your script in your vue-loader","archived":false,"fork":false,"pushed_at":"2016-11-08T01:31:48.000Z","size":529,"stargazers_count":91,"open_issues_count":1,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-05-02T01:37:24.713Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HerringtonDarkholme.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-08T01:31:19.000Z","updated_at":"2024-01-25T11:07:18.000Z","dependencies_parsed_at":"2023-01-22T08:05:37.030Z","dependency_job_id":null,"html_url":"https://github.com/HerringtonDarkholme/vue-ts-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HerringtonDarkholme%2Fvue-ts-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HerringtonDarkholme%2Fvue-ts-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HerringtonDarkholme%2Fvue-ts-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HerringtonDarkholme%2Fvue-ts-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HerringtonDarkholme","download_url":"https://codeload.github.com/HerringtonDarkholme/vue-ts-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243822312,"owners_count":20353496,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T02:00:29.537Z","updated_at":"2025-03-16T03:31:13.297Z","avatar_url":"https://github.com/HerringtonDarkholme.png","language":"JavaScript","funding_links":[],"categories":["Awesome Vue.js","实用库","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","公用事业","Components \u0026 Libraries","Utilities","Utilities [🔝](#readme)"],"sub_categories":["Development Tools","打字稿","Utilities","Typescript"],"readme":"\n# TypeScript loader for Vue-loader [![Build Status](https://travis-ci.org/HerringtonDarkholme/vue-ts-loader.svg?branch=master)](https://travis-ci.org/HerringtonDarkholme/vue-ts-loader)\n\nType-check your script in your Vue-loader. Easier importing _.ts_ file in vue's SFC.\n\n![screenshot](https://raw.githubusercontent.com/HerringtonDarkholme/vue-ts-example/master/screen.png)\n\n## Getting Started\n\nTutorials and examples can be [found here](http://herringtondarkholme.github.io/2016/10/03/vue2-ts2/).\n\n### Installation\n\n```\nnpm install vue-ts-loader\n```\n\nYou will also need to install TypeScript if you have not already.\n\n```\nnpm install typescript\n```\n\nYou also need install vue-loader and friends. Please refer to vue-loader's [documentation](http://vue-loader.vuejs.org/en/index.html).\n\n### Running\n\nUse webpack like normal, including `webpack --watch` and `webpack-dev-server`, or through another\nbuild system using the [Node.js API](http://webpack.github.io/docs/node.js-api.html).\n\n### Compatibility\n\nThe current version is compatible with TypeScript 2.0.\n\n### Configuration\n\n1. Create or update `webpack.config.js` like so:\n\n    ```javascript\n    module.exports = {\n      entry: './app.vue',\n      output: {\n        filename: 'bundle.js'\n      },\n      resolve: {\n        // Add `.ts` and `.vue` as a resolvable extension.\n        extensions: ['', '.ts', '.vue']\n      },\n      module: {\n        loaders: [\n          // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`\n          { test: /\\.vue$/, loader: 'vue-loader' },\n          { test: /\\.tsx?$/, loader: 'vue-ts-loader' }\n        ]\n      },\n      vue: {\n        loaders: {\n          ts: 'vue-ts-loader'\n        },\n        // important for cooperating with vue-loader\n        esModule: true\n      },\n    }\n    ```\n\n2. Add a `tsconfig.json` file. \u003ca name=\"tsconfig\"\u003e\u003c/a\u003e\n\n    ```javascript\n    {\n      \"compilerOptions\": {\n        \"target\": \"es5\",\n        \"sourceMap\": true\n      },\n      \"exclude\": [\n        \"node_modules\"\n      ]\n    }\n    ```\n\nThe [tsconfig.json](https://github.com/Microsoft/TypeScript/wiki/tsconfig.json) file controls\nTypeScript-related options so that your IDE, the `tsc` command, and this loader all share the\nsame options. TypeScript files from all subdirectories will get included except the ones matching `exclude`.\n\n### Failing the build on TypeScript compilation error\n\nWhen 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](https://www.npmjs.com/package/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.\n\nFor more background have a read of [this issue](https://github.com/TypeStrong/ts-loader/issues/108).\n\n#### Options\n\nThere are two types of options: TypeScript options (aka \"compiler options\") and loader options.\nTypeScript options should be set using a tsconfig.json file. Loader options can be set either\nusing a query when specifying the loader or through the `ts` property in the webpack configuration.\n\n```javascript\nmodule.exports = {\n  ...\n  module: {\n    loaders: [\n      // specify option using query\n      { test: /\\.tsx?$/, loader: 'vue-ts-loader?compiler=ntypescript' }\n    ]\n  },\n  // specify option using `ts` property\n  ts: {\n    compiler: 'ntypescript'\n  }\n}\n```\n\n##### transpileOnly *(boolean) (default=false)*\n\nIf you want to speed up compilation significantly you can set this flag.\nHowever, many of the benefits you get from static type checking between\ndifferent dependencies in your application will be lost. You should also\nset the `isolatedModules` TypeScript option if you plan to ever make use\nof this.\n\n##### silent *(boolean) (default=false)*\n\nIf true, no console.log messages will be emitted. Note that most error\nmessages are emitted via webpack which is not affected by this flag.\n\n##### ignoreDiagnostics *(number[]) (default=[])*\n\nYou can squelch certain TypeScript errors by specifying an array of diagnostic\ncodes to ignore.\n\n##### compiler *(string) (default='typescript')*\n\nAllows use of TypeScript compilers other than the official one. Should be\nset to the NPM name of the compiler, eg [`ntypescript`](https://github.com/basarat/ntypescript).\n\n##### configFileName *(string) (default='tsconfig.json')*\n\nAllows you to specify a custom configuration file.\n\n##### compilerOptions *(object) (default={})*\n\nAllows overriding TypeScript options. Should be specified in the same format\nas you would do for the `compilerOptions` property in tsconfig.json.\n\n##### instance *(string)*\n\nAdvanced option to force files to go through different instances of the\nTypeScript compiler. Can be used to force segregation between different parts\nof your code.\n\n### Loading other resources and code splitting\n\nLoading css and other resources is possible but you will need to make sure that\nyou have defined the `require` function in a declaration file.\n\n```typescript\ndeclare var require: {\n    \u003cT\u003e(path: string): T;\n    (paths: string[], callback: (...modules: any[]) =\u003e void): void;\n    ensure: (paths: string[], callback: (require: \u003cT\u003e(path: string) =\u003e T) =\u003e void) =\u003e void;\n};\n```\n\nThen you can simply require assets or chunks per the [webpack documentation](http://webpack.github.io/docs).\n\n```js\nrequire('!style!css!./style.css');\n```\n\nThe same basic process is required for code splitting. In this case, you `import` modules you need but you\ndon't directly use them. Instead you require them at [split points](http://webpack.github.io/docs/code-splitting.html#defining-a-split-point).\nSee [this example](test/codeSplitting) for more details.\n\n## Contributing\n\nPlease see the [contributer's guide](CONTRIBUTING.md).\n\n## License\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHerringtonDarkholme%2Fvue-ts-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHerringtonDarkholme%2Fvue-ts-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHerringtonDarkholme%2Fvue-ts-loader/lists"}