在本地链接 Vue 应用程序和 Vue 库 --> d.ts 问题;
Linking locally a Vue app and a Vue lib --> d.ts issue;
我在尝试将我的代码拆分为库和应用程序时遇到问题。
我想用Vuejs + TypeScript + WebPack,看起来是个不错的组合。
我在尝试从库中调用应用程序时遇到一些问题。这似乎是关于 d.ts 文件.
// 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",
我不想通过设置 strict=true
来绕过问题。我想在我的库中正确导出我的符号。
我的测试场景非常简单:
- lib 导出了一个 sayHello 方法
// helloworld.ts
export function sayHello() {
console.log('hi')
}
// index.ts
export {sayHello} from './helloworld';
- 应用程序调用 sayHello 方法
// 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>
(如果我通过直接调用 console.log 替换 sayHello,应用程序工作正常)
为了生成这两个项目,我使用了 vue create
。
在库端,我设置了以下配置:
// 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",
...
在应用程序端,我已经使用npm install "../my-lib"
在本地安装应用程序(路径没问题)。
我了解到,在开发版本中,这是一个不错的选择。
我猜问题出在 d.ts 文件生成的某个地方。我认为 tsc 应该自动创建它们,因为我正在编写打字稿文件。
但我找不到他们。我没有任何 d.ts 个文件。
我试过很多东西,比如:
- 手动调用
tsc -p tscconfig.json
(出现了一些d.ts,但没有lib,不了解vue文件。我需要使用我的build-lib
脚本)
- 添加一个
vue.config.js
(完全没有变化)
module.exports = {
configureWebpack: {
output: {
libraryExport: "default"
}
}
};
- 更改名称/检查名称/等
- 找到一个 old but unanswered message
我有点Web 开发的菜鸟(我是一名经验丰富的软件开发人员)。我正在努力研究这些技术。我有一种强烈的感觉,我在这个 TypeScript 中遗漏了一些东西。当涉及到库中的符号公开时,我可能会有一些 C++ 反应。我不知道。
我可以提供更多信息、更多代码部分等。我不想太具有侵略性:)
提前谢谢大家!
tsconfig.json
中的 declaration: true
应该 可以工作,但是有一个突出的阻塞问题 (vue-cli#1081
)。
解决方法是 运行 tsc
生成类型声明:
更新 tsconfig.json
设置 compilerOptions.outDir="dist"
:
{
"compilerOptions": {
"outDir": "dist"
}
}
更新 package.json
的构建脚本以包含用于生成类型声明的 tsc
命令:
{
"scripts": {
"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",
"types": "dist/index.d.ts",
}
我在尝试将我的代码拆分为库和应用程序时遇到问题。 我想用Vuejs + TypeScript + WebPack,看起来是个不错的组合。 我在尝试从库中调用应用程序时遇到一些问题。这似乎是关于 d.ts 文件.
// 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",
我不想通过设置 strict=true
来绕过问题。我想在我的库中正确导出我的符号。
我的测试场景非常简单:
- lib 导出了一个 sayHello 方法
// helloworld.ts
export function sayHello() {
console.log('hi')
}
// index.ts
export {sayHello} from './helloworld';
- 应用程序调用 sayHello 方法
// 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>
(如果我通过直接调用 console.log 替换 sayHello,应用程序工作正常)
为了生成这两个项目,我使用了 vue create
。
在库端,我设置了以下配置:
// 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",
...
在应用程序端,我已经使用npm install "../my-lib"
在本地安装应用程序(路径没问题)。
我了解到,在开发版本中,这是一个不错的选择。
我猜问题出在 d.ts 文件生成的某个地方。我认为 tsc 应该自动创建它们,因为我正在编写打字稿文件。 但我找不到他们。我没有任何 d.ts 个文件。
我试过很多东西,比如:
- 手动调用
tsc -p tscconfig.json
(出现了一些d.ts,但没有lib,不了解vue文件。我需要使用我的build-lib
脚本) - 添加一个
vue.config.js
(完全没有变化)
module.exports = {
configureWebpack: {
output: {
libraryExport: "default"
}
}
};
- 更改名称/检查名称/等
- 找到一个 old but unanswered message
我有点Web 开发的菜鸟(我是一名经验丰富的软件开发人员)。我正在努力研究这些技术。我有一种强烈的感觉,我在这个 TypeScript 中遗漏了一些东西。当涉及到库中的符号公开时,我可能会有一些 C++ 反应。我不知道。
我可以提供更多信息、更多代码部分等。我不想太具有侵略性:)
提前谢谢大家!
tsconfig.json
中的 declaration: true
应该 可以工作,但是有一个突出的阻塞问题 (vue-cli#1081
)。
解决方法是 运行 tsc
生成类型声明:
更新
tsconfig.json
设置compilerOptions.outDir="dist"
:{ "compilerOptions": { "outDir": "dist" } }
更新
package.json
的构建脚本以包含用于生成类型声明的tsc
命令:{ "scripts": { "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", "types": "dist/index.d.ts", }