在本地链接一个 Vue 应用程序和一个 Vue 库 -->d.ts 问题; [英] Linking locally a Vue app and a Vue lib --> d.ts issue;
问题描述
我在尝试在 lib 和应用程序之间拆分代码时遇到问题.我想使用 Vuejs + TypeScript + WebPack,这似乎是一个很好的组合.我在尝试从库中调用应用程序时遇到一些问题.这似乎是关于 d.ts 文件.
//powershell 输出13:22 找不到模块my-lib"的声明文件.'path/my-lib.common.js' 隐式具有 'any' 类型.尝试`npm install @types/my-lib`(如果存在)或添加一个包含`declare module 'my-lib'的新声明(.d.ts)文件;`11 |//从./components/HelloWorld.vue"导入HelloWorld;12 |>13 |从my-lib"导入 sayHello;|^14 |15 |导出默认 Vue.extend({16 |名称:应用程序",
我不想通过设置 strict=true
来绕过问题.我想在我的库中正确导出我的符号.
我的测试场景非常简单:
- lib 导出一个 sayHello 方法
//helloworld.ts导出函数 sayHello() {console.log('嗨')}
//index.ts从'./helloworld'导出{sayHello};
- 应用调用 sayHello 方法
//App.vue<模板><div id="应用程序"><button v-on:click="showMsg">点击我</button>
</模板><script lang="ts">从vue"导入 Vue;从my-lib"导入 sayHello;导出默认 Vue.extend({名称:应用程序",成分: {},方法: {显示消息:函数(){问好();}}});
(如果我通过直接调用 console.log 来替换 sayHello,该应用程序工作正常)
我使用 vue create
来生成两个项目.
在库方面,我设置了以下配置:
//package.json名称":我的库",...私人":真的,main":dist/my-lib.common.js",脚本":{...build-lib":vue-cli-service build --target lib src/index.ts",...
//tsconfig.json...声明":真实,noImplicitAny":真,outDir":./dist",...
在应用程序端,我已经使用 npm install "../my-lib"
在本地安装了应用程序(路径没问题).我知道在开发版本中,这是一个不错的选择.
我猜问题出在 d.ts 文件生成的某个地方.我认为 tsc 应该自动创建它们,因为我正在编写打字稿文件.但我找不到他们.我没有任何 d.ts 文件.
我尝试了多种方法,例如:
- 手动调用
tsc -p tscconfig.json
(出现了一些d.ts,但没有lib,不了解vue文件.我需要使用我的build-lib
脚本) - 添加一个
vue.config.js
(完全没有变化)
module.exports = {配置Webpack:{输出: {库导出:默认"}}};
- 更改名称/检查名称等
- 发现了一条旧但未答复的消息
我是网络开发新手(我是一名经验丰富的软件开发人员).我正在努力研究这些技术.我有一种强烈的感觉,我错过了这个 TypeScript 的东西.当涉及到库中的符号暴露时,我可能会有一些 C++ 反应.我不知道.
我可以提供更多信息、更多代码部分等.我不想太有侵略性:)
提前谢谢大家!
declaration: true
在 tsconfig.json
中应该工作,但是有一个突出的阻塞问题(vue-cli#1081
).
解决方法是运行 tsc
来生成类型声明:
更新
tsconfig.json
以设置compilerOptions.outDir="dist"
:{编译器选项":{outDir":dist";}}
更新
package.json
的构建脚本以包含用于生成类型声明的tsc
命令:{脚本":{build-lib":vue-cli-service build --target lib src/index.ts &&tsc --emitDeclarationOnly -p tsconfig.json"}}
更新
package.json
以指定main
脚本和类型声明文件的types
:{main":dist/my-lib.umd.js",类型":dist/index.d.ts",}
I am facing a problem while trying to split my code between a lib and an app. I want to use Vuejs + TypeScript + WebPack, it seems like a good combination. I encounter some issues while trying to call in the app anything from the lib. It seems like this is about the d.ts files.
// powershell output
13:22 Could not find a declaration file for module 'my-lib'. 'path/my-lib.common.js' implicitly has an 'any' type.
Try `npm install @types/my-lib` if it exists or add a new declaration (.d.ts) file containing `declare module 'my-lib';`
11 | // import HelloWorld from "./components/HelloWorld.vue";
12 |
> 13 | import sayHello from "my-lib";
| ^
14 |
15 | export default Vue.extend({
16 | name: "App",
I don't want to bypass problem by setting strict=true
. I want to correctly export my symbols in my lib.
My test scenario is pretty simple :
- the lib exports a sayHello method
// helloworld.ts
export function sayHello() {
console.log('hi')
}
// index.ts
export {sayHello} from './helloworld';
- the app call the sayHello method
// App.vue
<template>
<div id="app">
<button v-on:click="showMsg">Click Me</button>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import sayHello from "my-lib";
export default Vue.extend({
name: "App",
components: {},
methods: {
showMsg: function() {
sayHello();
}
}
});
</script>
(The app works fine if I replace the sayHello by a direct call to console.log)
I have used vue create
in order to generate both projects.
On the lib side, I have set the following config:
// package.json
"name": "my-lib",
...
"private": true,
"main": "dist/my-lib.common.js",
"scripts": {
...
"build-lib": "vue-cli-service build --target lib src/index.ts",
...
// tsconfig.json
...
"declaration": true,
"noImplicitAny": true,
"outDir": "./dist",
...
On the appside, I have install the app locally using npm install "../my-lib"
(path is ok).
I understood that during the development version, it's a good option.
I guess that the problem is somewhere around the d.ts files generation. I thought that tsc was supposed to create them automatically because I'm writting typescript files. But I can't find them. I don't have any d.ts files.
I have tried multiple stuff, like:
- calling
tsc -p tscconfig.json
manually (some d.ts appeared, but no lib, no understanding of vue files. I need to use mybuild-lib
script) - adding a
vue.config.js
(no change at all)
module.exports = {
configureWebpack: {
output: {
libraryExport: "default"
}
}
};
- changing names / checking names / etc.
- Found an old but unanswered message
I am kind of a rookie in Web development (I am an experienced software developer). I am trying to put my head around those technologies. I have this strong feeling that I'm missing something with this TypeScript thing. And I might have some c++ reflexes when it comes to symbols exposure in libraries. I don't know.
I can provide more infos, more code portion, etc. I didn't want to be too invasive :)
Thanks you all in advance !
declaration: true
in tsconfig.json
is supposed to work, but there's an outstanding blocking issue (vue-cli#1081
).
The workaround is to run tsc
to generate the type declarations:
Update
tsconfig.json
to setcompilerOptions.outDir="dist"
:{ "compilerOptions": { "outDir": "dist" } }
Update
package.json
's build script to include thetsc
command for generating type declarations:{ "scripts": { "build-lib": "vue-cli-service build --target lib src/index.ts && tsc --emitDeclarationOnly -p tsconfig.json" } }
Update
package.json
to specify themain
script, andtypes
for the type declaration file:{ "main": "dist/my-lib.umd.js", "types": "dist/index.d.ts", }
这篇关于在本地链接一个 Vue 应用程序和一个 Vue 库 -->d.ts 问题;的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!