feat(Vue): add support for TypeScript (#734)

* feat: add support for .ts files in Vue projects Add `awesome-typescript-loader` to the webpack configuration for vue projects. * refactor: add dependency to ts-loader The `ts-loader` for webpack is used for transpiling TS in Vue projects. * refactor(vue): use ts-loader instead of awesome-typescript-loader The `ts-loader` works for Single File Components, whereas the `awesome-typescript-loader` does not.
NativeScript · Dec 11, 2018 · d290515 · d290515
1 parent a3ed198
commit d290515
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -74,30 +74,31 @@
     "generate-android-snapshot": "./bin/generate-android-snapshot"
   },
   "dependencies": {
+    "@angular-devkit/core": "~7.1.0",
+    "awesome-typescript-loader": "~5.2.1",
+    "clean-webpack-plugin": "~1.0.0",
+    "copy-webpack-plugin": "~4.6.0",
+    "css-loader": "~1.0.0",
+    "extract-text-webpack-plugin": "~3.0.2",
     "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",

diff --git a/templates/webpack.vue.js b/templates/webpack.vue.js
@@ -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 = {
@@ -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"),
@@ -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
@@ -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",
@@ -263,4 +271,4 @@ module.exports = env => {
     }
 
     return config;
-};
+};