Skip to content
This repository was archived by the owner on Aug 7, 2021. It is now read-only.

feat(Vue): add support for TypeScript #734

Merged
merged 3 commits into from
Dec 11, 2018
Merged

feat(Vue): add support for TypeScript #734

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7804f6a
feat: add support for .ts files in Vue projects
sis0k0 Dec 10, 2018
e8c9167
refactor: add dependency to ts-loader
sis0k0 Dec 10, 2018
6b748af
refactor(vue): use ts-loader instead of awesome-typescript-loader
sis0k0 Dec 10, 2018
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 14 additions & 13 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,30 +74,31 @@
"generate-android-snapshot": "./bin/generate-android-snapshot"
},
"dependencies": {
"@angular-devkit/core": "~7.1.0",
"awesome-typescript-loader": "~5.2.1",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess we can remove this now :)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is still used in the webpack config for {N} + TypeScript apps. I will try to migrate that config to ts-loader as well and remove the awesome-typescript-loader.
"clean-webpack-plugin": "~1.0.0",
"copy-webpack-plugin": "~4.6.0",
"css-loader": "~1.0.0",
"extract-text-webpack-plugin": "~3.0.2",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one wasn't working with Webpack 4, does it now?
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch! It doesn't work and it is not used in the configs anymore. I will remove it.
"global-modules-path": "2.0.0",
"minimatch": "3.0.4",
"nativescript-hook": "0.2.4",
"nativescript-worker-loader": "~0.9.0",
"proxy-lib": "0.4.0",
"raw-loader": "~0.5.1",
"request": "2.88.0",
"resolve-url-loader": "~3.0.0",
"sass-loader": "~7.1.0",
"schema-utils": "0.4.5",
"semver": "5.4.1",
"shelljs": "0.6.0",
"tapable": "1.0.0",
"ts-loader": "^5.3.1",
"uglifyjs-webpack-plugin": "~1.2.5",
"webpack": "~4.27.0",
"webpack-cli": "~3.1.1",
"webpack-bundle-analyzer": "~3.0.2",
"webpack-sources": "~1.3.0",
"clean-webpack-plugin": "~1.0.0",
"copy-webpack-plugin": "~4.6.0",
"raw-loader": "~0.5.1",
"css-loader": "~1.0.0",
"nativescript-worker-loader": "~0.9.0",
"extract-text-webpack-plugin": "~3.0.2",
"uglifyjs-webpack-plugin": "~1.2.5",
"@angular-devkit/core": "~7.1.0",
"resolve-url-loader": "~3.0.0",
"awesome-typescript-loader": "~5.2.1",
"sass-loader": "~7.1.0"
"webpack-cli": "~3.1.1",
"webpack-sources": "~1.3.0"
},
"devDependencies": {
"@ngtools/webpack": "~7.1.0",
Expand Down
18 changes: 13 additions & 5 deletions templates/webpack.vue.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ module.exports = env => {
const appResourcesFullPath = resolve(projectRoot, appResourcesPath);

const entryModule = nsWebpack.getEntryModule(appFullPath);
const entryPath = `.${sep}${entryModule}.js`;
const entryPath = `.${sep}${entryModule}`;
console.log(`Bundling application for entryPath ${entryPath}...`);

const config = {
Expand All @@ -83,7 +83,7 @@ module.exports = env => {
globalObject: "global",
},
resolve: {
extensions: [".vue", ".js", ".scss", ".css"],
extensions: [".vue", ".ts", ".js", ".scss", ".css"],
// Resolve {N} system modules from tns-core-modules
modules: [
resolve(__dirname, "node_modules/tns-core-modules"),
Expand All @@ -96,8 +96,8 @@ module.exports = env => {
'@': appFullPath,
'vue': 'nativescript-vue'
},
// don't resolve symlinks to symlinked modules
symlinks: false,
// resolve symlinks to symlinked modules
symlinks: true,
},
resolveLoader: {
// don't resolve symlinks to symlinked loaders
Expand Down Expand Up @@ -187,6 +187,14 @@ module.exports = env => {
test: /\.js$/,
loader: 'babel-loader',
},
{
test: /\.ts$/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
allowTsInNodeModules: true,
},
},
{
test: /\.vue$/,
loader: "vue-loader",
Expand Down Expand Up @@ -263,4 +271,4 @@ module.exports = env => {
}

return config;
};
};