我知道这可能是一个非常愚蠢的问题。但它将意味着很多对我来说，最终真正掌握它！
所以我只想在浏览器中包含并使用D3（但也可以是任何其他的npm包）。
因此我创建了一个目录和一个index.html。我用npm init -y启动了一个新的npm项目，我安装了依赖项npm install d3。我创建了一个名为main.js的文件，看起来像这样：
// main.js
import * as d3 from "d3";
console.log(d3.scaleLinear());其中index.html
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./main.js" defer></script>
</head>
<body>
this is the body
</body>
</html>package.json则是这样的：
{
"name": "HowDoesNpmWork",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"d3": "^7.6.1"
}然而，在运行npx serve后，我确实在浏览器中收到了错误
Uncaught SyntaxError: import declarations may only appear at top level of a module main.js:1我并没有真正理解它。我正在安装D3，我说它是package.json中的一个模块。我在概念上误解了什么？我不能简单地在前端使用任何npm包吗？
为什么当我像这样在index.html中导入D3时它能工作呢？
import * as d3 from "https://cdn.skypack.dev/d3@7";它的操作与从node_modules加载它的操作不一样吗？
我会
1条答案
按热度按时间xuo3flqw1#
您必须添加代码是模块
这仍然依赖于D3允许像这样直接导入。并不是所有你用
npm install安装的包都能像这样直接在浏览器中工作。另一种解决方案是使用parcelJS这样的模块捆绑器，这是在前端使用
npm的更传统的方法。