https://codesandbox.io 如何实现对本地版本的依赖

Posted 2023-02-19

【中文标题】https://codesandbox.io 如何实现对本地版本的依赖

【英文标题】：https://codesandbox.io how to implement dependencies on local version

【发布时间】：2020-11-26 04:38:56

【问题描述】：

我偶然发现了一个我认为很有趣的项目。https://codesandbox.io/s/bar-chart-race-eop0s?file=/src/index.js

我下载了文件。 从 json 包文件中看到，我需要包含依赖项：

“名称”：“条形图比赛启动器”， “版本”：“1.0.0”， "描述": "", "main": "index.html", “脚本”： "start": "parcel index.html --open", "build": "parcel build index.html" , “依赖”： "@types/d3": "5.7.2", “d3”：“5.15.0” , “devDependencies”： "@babel/core": "7.2.0", “包裹捆绑器”：“^1.6.1” , “关键词”：[] 我获取了依赖项。

我将它们插入 index.html 我保存了 index.html

我尝试通过浏览器运行它： 未捕获的语法错误：导入声明只能出现在模块的顶层

src 文件夹有一个 index.jswebconsole complains at this line: import "./styles.css";

即使我通过

解决方法并将styles.css包含到html页面中

然后它哭泣import generateDataSets from "./dataGenerator"; 这是 index.js 的第 2 行

我在实现这个项目的本地版本时做错了。 有人能指出我哪里出错了吗？ 它必须比这容易得多。 帮助请下载本地版本，包括一个codesandbox.io项目的依赖项。

【参考方案1】：

您还需要安装 devDependencies (npm i -D)，然后运行 ​​npm start。

【讨论】：

感谢@julia 为我指明了正确的方向。

【参考方案2】：

https://codesandbox.io 使用 javascript 包管理器。 线索在 package.json 以及它是如何编写的。

关于 javascript 如何演变的详细说明：https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70

https://en.wikipedia.org/wiki/Npm_(software)

npm（最初是 Node Package Manager 的缩写）[4] 是 JavaScript 编程语言的包管理器。它是 JavaScript 运行时环境 Node.js 的默认包管理器。它由一个命令行客户端（也称为 npm）和一个包含公共和付费私人软件包的在线数据库（称为 npm 注册表）组成。通过客户端访问注册表，可以通过 npm 网站浏览和搜索可用的包。包管理器和注册表由 npm, Inc 管理

https://www.stackchief.com/tutorials/npm%20install%20%7C%20how%20it%20works npm 依赖与 devDependencies 那么有什么区别呢？当使用可选的 --production 标志时，不会安装作为 devDependencies 包含的包。这使得排除您只需要用于开发的包成为可能。 例如，linter 在强制执行干净代码方面很受欢迎，但在生产中不是必需的。您将包含一个 linter 包作为 devDependency，以便您可以在本地针对您的代码运行 linter，而无需将其包含在生产构建中。 npm install（带有--production） 下载 npmhttps://nodejs.org/en/download/

NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. WebpackNPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack

用于在 Windows 上安装 npm：https://phoenixnap.com/kb/install-node-js-npm-on-windows

将codesandbox.io保存在windows上：

保存压缩文件。 将 zip 文件解压缩到一个文件夹中。 打开命令提示符。 发出 npm 命令：npm install --save