堆栈内存溢出
  繁体   English   中英

如何将 Typescript 添加到 Nativescript-Vue 项目中？

[英]How to add Typescript to a Nativescript-Vue project?

 原文  2018-12-09 19:42:07  6   3    typescript/ vue.js/ nativescript/ nativescript-vue

问题描述

我已经努力了几天让 Typescript 在一个简单的模板生成的 Nativescript-Vue 项目中工作。 这是我所做的：

  1. 用他们的命令创建项目：
vue init nativescript-vue/vue-cli-template typescript2

  1. 按照此处的说明进行操作： https : //nativescript-vue.org/blog/using-typescript-in-nativescript-vue/

  2. 添加了一个包含内容的 env.d.ts 文件：

declare var TNS_ENV: string;
  1. 添加了一个包含以下内容的 shims.vue.d.ts 文件：
declare module '*.vue' {
    import Vue from 'vue'
    export default Vue
}
  1. 添加了 .ts 扩展名以解析 webpack.config.js 中的扩展名。
  2. 在 webpack.config.js 中添加了以下规则。
{
    test: /\.ts$/,
    exclude: /node_modules|vue\/src/,
    loader: "ts-loader",
    options: {
        appendTsSuffixTo: [/\.vue$/]
    }
},
  1. 然后使用以下命令运行应用程序：
tns run android --bundle

这会导致以下错误：

ERROR in Entry module not found: Error: Can't resolve './main.js' in '/Data/dev/test/Nativescript/typescript2/app'
Webpack compilation complete. Watching for file changes.
Webpack build done!
Executing before-shouldPrepare hook from /Data/dev/test/Nativescript/typescript2/hooks/before-shouldPrepare/nativescript-dev-webpack.js
Preparing project...
Executing before-prepareJSApp hook from /Data/dev/test/Nativescript/typescript2/hooks/before-prepareJSApp/nativescript-dev-webpack.js
Project successfully prepared (Android)
Executing after-prepare hook from /Data/dev/test/Nativescript/typescript2/hooks/after-prepare/nativescript-dev-webpack.js
Building project...
Gradle build...
         + setting applicationId
         + applying user-defined configuration from /Data/dev/test/Nativescript/typescript2/app/App_Resources/Android/app.gradle
Using support library version 28.0.0
         + adding nativescript runtime package dependency: nativescript-optimized-with-inspector
         + adding aar plugin dependency: /Data/dev/test/Nativescript/typescript2/node_modules/nativescript-socket.io/platforms/android/nativescript_socket.io.aar
         + adding aar plugin dependency: /Data/dev/test/Nativescript/typescript2/node_modules/tns-core-modules-widgets/platforms/android/widgets-release.aar
(node:3079) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
java.io.FileNotFoundException: /Data/dev/test/Nativescript/typescript2/platforms/android/build-tools/sbg-bindings.txt (No such file or directory)
        at java.io.FileInputStream.open0(Native Method)
        at java.io.FileInputStream.open(FileInputStream.java:195)
        at java.io.FileInputStream.<init>(FileInputStream.java:138)
        at java.io.FileInputStream.<init>(FileInputStream.java:93)
        at org.nativescript.staticbindinggenerator.Generator.getRows(Generator.java:145)
        at org.nativescript.staticbindinggenerator.Generator.generateBindings(Generator.java:85)
        at org.nativescript.staticbindinggenerator.Generator.writeBindings(Generator.java:63)
        at org.nativescript.staticbindinggenerator.Main.main(Main.java:48)
Project successfully built.
Installing on device FA7A11A03046...
Successfully installed on device with identifier 'FA7A11A03046'.
Refreshing application on device FA7A11A03046...
System.err: java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException:
System.err:
System.err: Error calling module function
System.err:
System.err: Error: com.tns.NativeScriptException: Failed to find module: "./vendor", relative to: app/
System.err:     com.tns.Module.resolvePathHelper(Module.java:146)
System.err:     com.tns.Module.resolvePath(Module.java:55)
System.err:     com.tns.Runtime.runModule(Native Method)
System.err:     com.tns.Runtime.runModule(Runtime.java:553)
System.err:     com.tns.Runtime.run(Runtime.java:545)
System.err:     com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
System.err:     android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1154)
System.err:     android.app.ActivityThread.handleBindApplication(ActivityThread.java:5882)
System.err:     android.app.ActivityThread.access$1100(ActivityThread.java:200)
System.err:     android.app.ActivityThread$H.handleMessage(ActivityThread.java:1651)
System.err:     android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     android.os.Looper.loop(Looper.java:193)
System.err:     android.app.ActivityThread.main(ActivityThread.java:6680)
System.err:     java.lang.reflect.Method.invoke(Native Method)
System.err:     com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
System.err: File: "<unknown>, line: 1, column: 265
System.err:
System.err: StackTrace:
System.err:     Frame: function:'require', file:'', line: 1, column: 266
System.err:     Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/starter.js', line: 1, column: 61
System.err:     Frame: function:'require', file:'', line: 1, column: 266
System.err:
System.err:
System.err: Error: com.tns.NativeScriptException: Failed to find module: "./vendor", relative to: app/
System.err:     com.tns.Module.resolvePathHelper(Module.java:146)
System.err:     com.tns.Module.resolvePath(Module.java:55)
System.err:     com.tns.Runtime.runModule(Native Method)
System.err:     com.tns.Runtime.runModule(Runtime.java:553)
System.err:     com.tns.Runtime.run(Runtime.java:545)
System.err:     com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
System.err:     android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1154)
System.err:     android.app.ActivityThread.handleBindApplication(ActivityThread.java:5882)
System.err:     android.app.ActivityThread.access$1100(ActivityThread.java:200)
System.err:     android.app.ActivityThread$H.handleMessage(ActivityThread.java:1651)
System.err:     android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     android.os.Looper.loop(Looper.java:193)
System.err:     android.app.ActivityThread.main(ActivityThread.java:6680)
System.err:     java.lang.reflect.Method.invoke(Native Method)
System.err:     com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
System.err: File: "<unknown>, line: 1, column: 265
System.err:
System.err: StackTrace:
System.err:     Frame: function:'require', file:'', line: 1, column: 266
System.err:     Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/starter.js', line: 1, column: 61
System.err:     Frame: function:'require', file:'', line: 1, column: 266
System.err:
System.err:     at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5887)
System.err:     at android.app.ActivityThread.access$1100(ActivityThread.java:200)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1651)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     at android.os.Looper.loop(Looper.java:193)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6680)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
System.err: Caused by: com.tns.NativeScriptException:
System.err:
System.err: Error calling module function
System.err:
System.err: Error: com.tns.NativeScriptException: Failed to find module: "./vendor", relative to: app/
System.err:     com.tns.Module.resolvePathHelper(Module.java:146)
System.err:     com.tns.Module.resolvePath(Module.java:55)
System.err:     com.tns.Runtime.runModule(Native Method)
System.err:     com.tns.Runtime.runModule(Runtime.java:553)
System.err:     com.tns.Runtime.run(Runtime.java:545)
System.err:     com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
System.err:     android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1154)
System.err:     android.app.ActivityThread.handleBindApplication(ActivityThread.java:5882)
System.err:     android.app.ActivityThread.access$1100(ActivityThread.java:200)
System.err:     android.app.ActivityThread$H.handleMessage(ActivityThread.java:1651)
System.err:     android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     android.os.Looper.loop(Looper.java:193)
System.err:     android.app.ActivityThread.main(ActivityThread.java:6680)
System.err:     java.lang.reflect.Method.invoke(Native Method)
System.err:     com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
System.err: File: "<unknown>, line: 1, column: 265
System.err:
System.err: StackTrace:
System.err:     Frame: function:'require', file:'', line: 1, column: 266
System.err:     Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/starter.js', line: 1, column: 61
System.err:     Frame: function:'require', file:'', line: 1, column: 266
System.err:
System.err:
System.err: Error: com.tns.NativeScriptException: Failed to find module: "./vendor", relative to: app/
System.err:     com.tns.Module.resolvePathHelper(Module.java:146)
System.err:     com.tns.Module.resolvePath(Module.java:55)
System.err:     com.tns.Runtime.runModule(Native Method)
System.err:     com.tns.Runtime.runModule(Runtime.java:553)
System.err:     com.tns.Runtime.run(Runtime.java:545)
System.err:     com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
System.err:     android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1154)
System.err:     android.app.ActivityThread.handleBindApplication(ActivityThread.java:5882)
System.err:     android.app.ActivityThread.access$1100(ActivityThread.java:200)
System.err:     android.app.ActivityThread$H.handleMessage(ActivityThread.java:1651)
System.err:     android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     android.os.Looper.loop(Looper.java:193)
System.err:     android.app.ActivityThread.main(ActivityThread.java:6680)
System.err:     java.lang.reflect.Method.invoke(Native Method)
System.err:     com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
System.err: File: "<unknown>, line: 1, column: 265
System.err:
System.err: StackTrace:
System.err:     Frame: function:'require', file:'', line: 1, column: 266
System.err:     Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/starter.js', line: 1, column: 61
System.err:     Frame: function:'require', file:'', line: 1, column: 266
System.err:
System.err:     at com.tns.Runtime.runModule(Native Method)
System.err:     at com.tns.Runtime.runModule(Runtime.java:553)
System.err:     at com.tns.Runtime.run(Runtime.java:545)
System.err:     at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
System.err:     at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1154)
System.err:     at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5882)
System.err:     ... 8 more
Successfully synced application org.nativescript.application on device FA7A11A03046.
^[[A^CExecuting after-watch hook from /Data/dev/test/Nativescript/typescript2/hooks/after-watch/nativescript-dev-webpack.js
Stopping webpack watch
Executing after-watch hook from /Data/dev/test/Nativescript/typescript2/hooks/after-watch/nativescript-dev-webpack.js
Stopping webpack watch

有什么我想念的吗？ 我很想在我即将开始的 Nativescript-Vue 项目中享受 Typescript 的好处。

这是与以下版本：

Nativescript CLI: 5.0.3
Nativescript-Vue: 2.0.2
Webpack: 4.27.1

更新：快速说明，在第 1 步中创建应用程序时，我选择了简单模板，安装了 VueX，并安装了 Vue-Devtools。

3 个解决方案

解决方案1
 3 已采纳  2018-12-30 16:40:41

更新（2019 年 1 月 30 日）：好消息 - 我认为他们正在使用此PR 中的模板添加对 Typescript 的开箱即用支持。

所以从现在开始，我们应该能够在使用模板引导项目时选择Typescript作为语言选项。

我遇到了同样的问题，这是我将 TypeScript 添加到我的 Nativescript-Vue 项目所做的工作。 （我没有足够的声誉来添加评论，所以我必须将此作为答案发布）

  1. 使用vue init nativescript-vue/vue-cli-template <project-name> 创建项目
    • 在项目创建期间有一个关于webpack.config.js的警告，我被要求运行./node_modules/.bin/update-ns-webpack --configs
    • Vue Devtools 不适用于tns preview所以我也禁用了它
  2. 添加以下内容：
    • 安装typescript和vue为devDependencies
    • 将app/main.js重命名为app/main.ts
    • 在app/main.ts ，将import App from './components/App'更改为import App from './components/App.vue'
    • 添加tsconfig.json （从这个 stater 项目复制并注释掉"strict": true, ）
    • 在webpack.config.js ，添加'vue$': 'nativescript-vue'下的alias和exclude: /node_modules|vue\\/src/,下module.rules （到一个ts - 细节在这里）
    • 正如您在第 3 步和第 4 步中提到的，我还在types/文件夹下相应地创建了env.d.ts和shims.vue.d.ts （请注意，在我复制的tsconfig.json文件中，它定义了"typeRoots": ["types"] )
  3. 我已经用tns preview --bundle测试过了
    • 该应用程序在我的 android 手机上运行良好（没有错误，可以在手机上看到更改）
    • 如有必要，我可以测试它是否适用于命令tns run android --bundle

希望以上能帮到你。

版本

使用的版本如下：

  • Nativescript CLI：5.1.0
  • 本机脚本-vue：2.0.2
  • 网络包：4.28.3

参考

  1. 这是我为了将 TypeScript 添加到项目而执行的git commit 。
  2. 关于将 TypeScript 添加到 nativescript-vue的官方博客文章- 非常有帮助，但不幸的是，在执行这些步骤后它并没有立即起作用（可能是因为我使用了不同的 vue-init 模板）
  3. 当然，感谢这个堆栈溢出问题中列出的详细步骤，它为我提供了修复项目的方向:-)

解决方案2
 3  2019-03-22 02:30:28

现在还有一个用于 Nativescript-Vue 的Vue CLI 3 插件，它将用 Javascript 或 Typescript 构建整个项目，然后利用 Vue CLI 3 基础设施来帮助你。 免责声明：我是插件当前状态的主要贡献者。

它还包括在 Web 和本机项目之间共享代码的能力，或者您可以仅继续进行本机项目。

您可以利用 CLI 3 UI 体验或使用终端。 无论哪种方式，您都可以执行以下操作：

  1. 创建一个新的 Vue 项目并确保选择 Typescript。 在终端中，这将是vue create my-app ，然后在提示中，选择 Typescript。
  2. 如果您在终端中，请确保切换到项目目录。 如果您在 UI 中，那么这是不必要的。
  3. 将插件添加到项目中。 在终端中，这将是vue add vue-cli-plugin-nativescript-vue 。

解决方案3
 0  2020-04-09 02:18:07

如果您喜欢开箱即用的支持 nativescript navigator (router)、vuex、typescript/eslint、prettier 和使用面向模块的方法结构化的模板 ( https://mnapoli.fr/organizing-code-into-domain-modules / ) 随着您的应用程序的增长易于维护，您可以克隆我们的开源项目： https : //github.com/Lyduz/nitibo

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用打字稿在 Nativescript-vue 中传递对象而不是字符串？ 如何使用 typescript 使用手动路由 nativescript-vue？ 使用 Typescript 支持启动新的 nativescript-vue 项目的正确方法是什么？ Nativescript-vue + Typescript - HMR 不适用于 Vue Class 组件 NativeScript-Vue with Typescript in VSCode with Vetur: Alert with then giving Property 'then' does not exist on type 'void' 带ts-loader的NativeScript-Vue打字稿链式加载babel-loader Nativescript-vue 打字稿。 通过代码将自定义组件添加到布局容器 Nativescript-Vue devtools 不更新页面 Nativescript-Vue 创建动态元素 超时后 Nativescript-vue 更改值
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM