Как добавить Typescript в проект Nativescript-Vue?

Я уже пару дней борюсь за то, чтобы Typescript работал в простом проекте Nativescript-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;

Добавлен файл shims.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

Что мне не хватает? Мне бы хотелось воспользоваться преимуществами Typescript в проекте Nativescript-Vue, который я собираюсь начать.

Это со следующими версиями:

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

ОБНОВЛЕНИЕ: примечание: при создании приложения на шаге 1 я выбрал простой шаблон, установил VueX и установил Vue-Devtools.

Jason 09.12.2018 источник

comment

вы можете запустить проект без добавления машинописного текста? Я создал новый проект, используя vue init nativescript-vue / vue-cli-template typescript2, и запустил tns run android --bundle, и это дает мне ту же ошибку. - Narendra 12.12.2018

comment

@NarendraMongiya Да, у меня все работает без машинописи. Может быть, проверьте версии CLI, Nativescript-Vue и Webpack, которые вы используете? - Jason 15.12.2018

Ответы (3)

arrow_upward
3
arrow_downward

Обновление (30 января 2019 г.): Хорошие новости - я думаю, они добавляют готовую поддержку Typescript с помощью шаблона в этом PR.

Таким образом, с этого момента мы должны иметь возможность выбрать Typescript в качестве параметра языка при загрузке проекта с помощью шаблона.

Я столкнулся с той же проблемой, и вот что я сделал, чтобы добавить TypeScript в свой проект Nativescript-Vue. (У меня недостаточно репутации, чтобы добавить комментарий, поэтому я должен опубликовать это как ответ)

Create the project with vue init nativescript-vue/vue-cli-template <project-name>
- There is a warning about webpack.config.js during the project creation and I was asked to run ./node_modules/.bin/update-ns-webpack --configs
- Vue Devtools не работает с tns preview, поэтому у меня отключил и это
Add the following:
- Install typescript and vue as devDependencies
- Переименовать app/main.js в app/main.ts
- В app/main.ts измените import App from './components/App' на import App from './components/App.vue'
- Добавить tsconfig.json (скопировано из этого проекта статера И закомментировал "strict": true,)
- В webpack.config.js добавьте 'vue$': 'nativescript-vue' под alias и exclude: /node_modules|vue\/src/, под module.rules (к тому, что для ts - подробности здесь)
- Как вы упомянули в шагах 3 и 4, я также создал env.d.ts и shims.vue.d.ts в папке types/ соответственно (обратите внимание, что в файле tsconfig.json, который я скопировал, он определил "typeRoots": ["types"])
I had tested it with tns preview --bundle
- The app is running fine on my android phone (no errors, changes can be seen on the phone)
- при необходимости я могу проверить, будет ли он работать с командой tns run android --bundle

Надеюсь, это поможет.

Версия

Используются следующие версии:

Nativescript CLI: 5.1.0
nativescript-vue: 2.0.2
webpack: 4.28.3

Ссылка

Это git commit, который я сделал в чтобы добавить TypeScript в проект.
официальная запись блога о добавлении TypeScript в nativescript-vue - Это было очень полезно, но, к сожалению, не сработало сразу после выполнения этих шагов (возможно, потому, что я использовал другой шаблон vue-init)
И, конечно, слава подробным шагам, перечисленным в этом вопросе о переполнении стека, который дал мне направление исправить мой проект :-)

H.T. Koo 30.12.2018

comment

Приносим извинения за медленный отклик, но я просто решил попробовать это, и это сработало! Ух ты! - Jason; 28.01.2019

comment

Не беспокойтесь, рад, что это сработало. :-) К вашему сведению, обновление заключается в том, что я думаю, что они добавляют готовую поддержку TypeScript в этот PR. Я обновлю свой ответ соответственно. - H.T. Koo; 30.01.2019

arrow_upward
3
arrow_downward

Также теперь существует плагин Vue CLI 3 для Nativescript- Vue, который построит весь проект на Javascript или Typescript, а затем использует инфраструктуру Vue CLI 3, чтобы помочь вам. Отказ от ответственности: я являюсь основным соавтором текущего состояния плагина.

Он также включает в себя возможность совместного использования кода между веб-проектами и собственными проектами, или вы можете продолжить работу только с собственным проектом.

Вы можете использовать интерфейс CLI 3 UI или использовать терминал. В любом случае вы можете сделать следующее:

Создайте новый проект Vue и убедитесь, что вы выбрали Typescript. В терминале это будет vue create my-app, а затем в подсказках выберите Typescript.
Если вы находитесь в терминале, убедитесь, что вы перешли в каталог проекта. Если вы находитесь в пользовательском интерфейсе, в этом нет необходимости.
Добавьте плагин в проект. В терминале это будет vue add vue-cli-plugin-nativescript-vue.

Jawa the Hutt 22.03.2019

arrow_upward
0
arrow_downward

Если вам нравятся шаблоны с готовой поддержкой навигатора nativescript (router), vuex, typescript / eslint, prettier и структурированных с использованием модульно-ориентированного подхода (https://mnapoli.fr/organizing-code-into-domain-modules/) для упрощения обслуживания по мере роста вашего приложения, вы можете клонировать наш открытый -source project: https://github.com/Lyduz/nitibo

Karl Anthony Baluyot 09.04.2020

Как добавить Typescript в проект Nativescript-Vue?

Ответы (3)

Версия

Ссылка

Вопросы по теме