对于上下文;我正在制作一个客户端脚本,并且厌倦了在每次进行更改时都等待webpack捆绑所有依赖项。因此,我通过<script>
标签在html文件中添加了依赖项,但是,我想不出一种将类型添加到由依赖项创建的全局变量中的方法。
例如:
在我的html中,我像这样包含d3:
<script src="https://cdn.jsdelivr.net/npm/d3@5.15.0/dist/d3.min.js"></script>
在我的index.ts
文件中,我有以下内容:
declare const d3; // currently has the <any> type
//I do stuff with d3 down here
,并且正常工作。但是,D3是一个庞大的库,而intellisense可以帮助很多人,因此我不会经常查看它们令人困惑的文档。我希望能够像这样包含我的打字文件:
import type d3 from 'd3'
declare const d3:d3;
但是,该错误是因为它与我的本地声明冲突。
摘要
有人能将键入内容应用于外部包含的javascript文件吗?
[编辑] 我在下面包含了package.json文件,以显示我正在使用的技术。真的不多。
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack -w"
},
"keywords": [],
"author": "Michael Sorensen",
"license": "ISC",
"dependencies": {
// I'm including the dependencies that were here in my html file
},
"devDependencies": {
"@types/chart.js": "^2.9.16",
"@types/d3": "^5.7.2",
"@types/geojson": "^7946.0.7",
"@types/papaparse": "^5.0.3",
"ts-loader": "^6.2.2",
"typescript": "^3.8.3",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11",
"webpack-node-externals": "^1.7.2"
}
}
答案 0 :(得分:0)
如果您的编辑器支持.d.ts
类型的文件,则应该可以在以下位置找到一个文件:
答案 1 :(得分:0)
因此,如果您在SO @Erik Phillips上找到此帖子,则可能是您正在寻找的答案。
但是,就我而言,我只是错误地设置了Webpack。我需要手动定义我的外部模块,而不是使用node_externals Webpack插件。
我的webpack.config.js文件现在看起来像这样:
module.exports = {
mode: "production",
entry: "./src/index.ts",
devtool: "inline-source-map",
externals: [
{
d3: "d3",
"chart.js": "Chart",
papaparse: "Papa",
}
], // in order to ignore all modules in node_modules folder
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js", ".json"]
},
output: {
filename: "index.js",
path: path.resolve(__dirname, "build")
}
};
现在,我可以将我的打字稿文件打包为文件,而无需包含所提到的库,而无需更改它们的导入方式。现在看来是如此明显。