代码之家 › 专栏 › 技术社区 › Jason

如何将typescript添加到NativeScript Vue项目?

nativescript-vue nativescript vue.js typescript

2

Jason · 技术社区 · 6 年前

为了让typescript在一个简单的模板生成的本机脚本Vue项目中工作,我已经挣扎了几天。以下是我所做的:

使用它们创建了项目命令:

vue init nativescript-vue/vue-cli-template typescript2

遵循以下说明: https://nativescript-vue.org/blog/using-typescript-in-nativescript-vue/
添加了一个包含以下内容的env.d.ts文件:

declare var TNS_ENV: string;

添加了垫片.vue.d.ts文件,内容如下:

declare module '*.vue' {
    import Vue from 'vue'
    export default Vue
}

添加了.ts扩展以解析webpack.config.js中的扩展。
在webpack.config.js中添加了以下规则。

{
    test: /\.ts$/,
    exclude: /node_modules|vue\/src/,
    loader: "ts-loader",
    options: {
        appendTsSuffixTo: [/\.vue$/]
    }
},

然后使用以下命令运行应用程序:

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。

1 回复 | 直到 6 年前

1

2

H.T. Koo 6 年前

更新 (2019年1月30日):好消息-我认为他们正在增加对该模板中的typescript的开箱即用支持。 PR .

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

我也遇到过同样的问题,这里是我为将typescript添加到我的nativescript vue项目所做的。(我没有足够的声誉添加评论,因此我必须将此作为答案发布)

Create the project 具有 vue init nativescript-vue/vue-cli-template <project-name>
- 有一个关于 webpack.config.js 在项目创建期间,我被要求运行 ./node_modules/.bin/update-ns-webpack --configs
- Vue Devtools does not work with tns preview 所以我也禁用了它
添加以下内容:
- 安装 typescript 和 vue 作为DevDependencies
- 重命名 app/main.js 到 app/main.ts
- 在 APP/MNET.TS 改变 import App from './components/App' 到 import App from './components/App.vue'
- 添加 tsconfig.json (复制自 this stater project 并发表了评论 "strict": true, )
- 在 web包.config.js ,添加 'vue$': 'nativescript-vue' 在下面 alias 和 exclude: /node_modules|vue\/src/, 在下面 module.rules (对某人来说) ts - details here )
- 正如您在步骤3和4中提到的,我还创建了 env.d.ts 和 shims.vue.d.ts 在下面 types/ 相应的文件夹(注意 TSOCONT.JSON 我复制的文件,它定义了 "typeRoots": ["types"] )
我用 tns preview --bundle
- 我的Android手机上的应用程序运行正常(没有错误,手机上可以看到更改)
- 如果必要的话,我可以测试它是否能与命令一起工作 tns run android --bundle

希望以上能有所帮助。

版本

使用的版本如下:

native脚本cli:5.1.0
本机脚本Vue:2.0.2
WebPACK:4.23.3

参考文献

这就是 git commit 我这样做是为了向项目中添加typescript。
这个 official blog post about adding TypeScript to nativescript-vue -它非常有用,但不幸的是,执行这些步骤后,它没有立即工作(可能是因为我使用了不同的Vue初始化模板)
当然,对于这个堆栈溢出问题中列出的详细步骤,我很荣幸,这个问题给了我修复项目的方向:—)