feat(nvue): 支持typescript

packages/vue-cli-plugin-hbuilderx/build/webpack.nvue.conf.js

@@ -349,6 +349,24 @@ try {
   }
 } catch (e) {}
 
+rules.push({
+  test: /\.ts$/,
+  use: [{
+    loader: require.resolve('babel-loader', {
+      paths: [require.resolve('@vue/cli-plugin-babel')]
+    })
+  }, {
+    loader: require.resolve('ts-loader', {
+      paths: [require.resolve('@vue/cli-plugin-babel')]
+    }),
+    options: Object.assign({
+      transpileOnly: false,
+      appendTsSuffixTo: ['\\.nvue$'],
+      happyPackMode: false
+    }, require('@dcloudio/vue-cli-plugin-uni/lib/util').getTsLoadOptions())
+  }, jsPreprocessorLoader]
+})
+
 module.exports = function () {
   return {
     target: 'node', // 激活 vue-loader 的 isServer 逻辑

packages/vue-cli-plugin-uni/lib/configure-webpack.js

-const fs = require('fs')
 const path = require('path')
 const webpack = require('webpack')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
@@ -14,10 +13,6 @@ function resolve (dir) {
   return path.resolve(__dirname, '..', dir)
 }
 
-function resolveModule (dir) {
-  return path.resolve(process.env.UNI_CLI_CONTEXT, './node_modules', dir)
-}
-
 module.exports = function configureWebpack (platformOptions, manifestPlatformOptions, vueOptions, api) {
   const {
     runByHBuilderX, // 使用 HBuilderX 运行
@@ -97,71 +92,7 @@ module.exports = function configureWebpack (platformOptions, manifestPlatformOpt
     matchUse.push(loader)
   }
 
-  const userTsConfigJson = path.resolve(process.env.UNI_INPUT_DIR, 'tsconfig.json')
-  const defaultTsConfigJson = path.resolve(process.env.UNI_CLI_CONTEXT, 'tsconfig.json')
-
-  const tsConfigJsonFile = fs.existsSync(userTsConfigJson) ? userTsConfigJson : defaultTsConfigJson
-
-  const context = isInHBuilderX ? process.env.UNI_INPUT_DIR : process.env.UNI_CLI_CONTEXT
-
-  const tsLoaderOptions = {
-    context,
-    configFile: tsConfigJsonFile,
-    compilerOptions: {
-      baseUrl: context,
-      typeRoots: [
-        resolveModule('@dcloudio/types'),
-        resolveModule('@types'),
-        path.resolve(process.env.UNI_CLI_CONTEXT, 'types')
-      ],
-      types: [
-        'uni-app',
-        'uni-app-vue2',
-        'webpack-env'
-      ],
-      paths: {
-        '@/*': [
-          path.join(process.env.UNI_INPUT_DIR, '*')
-        ],
-        vue: [
-          resolveModule('vue')
-        ],
-        vuex: [
-          resolveModule('vuex')
-        ],
-        'vue-class-component': [
-          resolveModule('vue-class-component')
-        ],
-        'vue-property-decorator': [
-          resolveModule('vue-property-decorator')
-        ],
-        tslib: [
-          resolveModule('tslib')
-        ],
-        'mpvue-page-factory': [
-          resolveModule('@dcloudio/vue-cli-plugin-uni/packages/mpvue-page-factory')
-        ],
-        '@vue/composition-api': [
-          resolveModule('@dcloudio/vue-cli-plugin-uni/packages/@vue/composition-api')
-        ],
-        '@dcloudio/uni-app': [
-          resolveModule('@dcloudio/uni-app')
-        ]
-      }
-    },
-    errorFormatter (error, colors) {
-      const messageColor = error.severity === 'warning' ? colors.bold.yellow : colors.bold.red
-      const filePath = path.relative(process.env.UNI_INPUT_DIR, error.file).replace('.vue.ts', '.vue')
-      if (error.code === 2307 && error.content.includes('.vue')) {
-        error.content = error.content.replace('Cannot find module ', '') +
-          ' script 节点必须使用 lang="ts",文档参考地址:https://uniapp.dcloud.io/frame?id=vue-ts'
-      }
-      return messageColor(
-        `[tsl] ERROR at ${filePath}:${error.line}
-  TS${error.code}:${error.content}`
-      )
-    }
-  }
+  const tsLoaderOptions = require('./util').getTsLoadOptions()
 
   function updateTsLoader (rawRules, fakeFile, loader) {
     const matchRule = rawRules.find(createMatcher(fakeFile))

packages/vue-cli-plugin-uni/lib/util.js

+const fs = require('fs')
 const path = require('path')
+
 const {
   pathToGlob
 } = require('@dcloudio/uni-cli-shared/lib/util')
@@ -37,5 +39,79 @@ module.exports = {
         path.resolve(process.env.UNI_INPUT_DIR, 'cloudfunctions-tcb')
       ]
     }
+  },
+  getTsLoadOptions () {
+    const {
+      isInHBuilderX // 在 HBuilderX 的插件中
+    } = require('@dcloudio/uni-cli-shared')
+    const userTsConfigJson = path.resolve(process.env.UNI_INPUT_DIR, 'tsconfig.json')
+    const defaultTsConfigJson = path.resolve(process.env.UNI_CLI_CONTEXT, 'tsconfig.json')
+
+    const tsConfigJsonFile = fs.existsSync(userTsConfigJson) ? userTsConfigJson : defaultTsConfigJson
+
+    const context = isInHBuilderX ? process.env.UNI_INPUT_DIR : process.env.UNI_CLI_CONTEXT
+
+    function resolveModule (dir) {
+      return path.resolve(process.env.UNI_CLI_CONTEXT, './node_modules', dir)
+    }
+
+    return {
+      context,
+      configFile: tsConfigJsonFile,
+      compilerOptions: {
+        baseUrl: context,
+        typeRoots: [
+          resolveModule('@dcloudio/types'),
+          resolveModule('@types'),
+          path.resolve(process.env.UNI_CLI_CONTEXT, 'types')
+        ],
+        types: [
+          'uni-app',
+          'uni-app-vue2',
+          'webpack-env'
+        ],
+        paths: {
+          '@/*': [
+            path.join(process.env.UNI_INPUT_DIR, '*')
+          ],
+          vue: [
+            resolveModule('vue')
+          ],
+          vuex: [
+            resolveModule('vuex')
+          ],
+          'vue-class-component': [
+            resolveModule('vue-class-component')
+          ],
+          'vue-property-decorator': [
+            resolveModule('vue-property-decorator')
+          ],
+          tslib: [
+            resolveModule('tslib')
+          ],
+          'mpvue-page-factory': [
+            resolveModule('@dcloudio/vue-cli-plugin-uni/packages/mpvue-page-factory')
+          ],
+          '@vue/composition-api': [
+            resolveModule('@dcloudio/vue-cli-plugin-uni/packages/@vue/composition-api')
+          ],
+          '@dcloudio/uni-app': [
+            resolveModule('@dcloudio/uni-app')
+          ]
+        }
+      },
+      errorFormatter (error, colors) {
+        const messageColor = error.severity === 'warning' ? colors.bold.yellow : colors.bold.red
+        const filePath = path.relative(process.env.UNI_INPUT_DIR, error.file).replace('.vue.ts', '.vue')
+        if (error.code === 2307 && error.content.includes('.vue')) {
+          error.content = error.content.replace('Cannot find module ', '') +
+            ' script 节点必须使用 lang="ts",文档参考地址:https://uniapp.dcloud.io/frame?id=vue-ts'
+        }
+        return messageColor(
+          `[tsl] ERROR at ${filePath}:${error.line}
+    TS${error.code}:${error.content}`
+        )
+      }
+    }
   }
 }