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

Question

我偶然发现了一个我认为很有趣的项目。
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.js
webconsole complains at this line: import "./styles.css";

即使我通过

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

然后它哭泣
import { generateDataSets } from "./dataGenerator";

这是 index.js 的第 2 行

我在实现这个项目的本地版本时做错了。

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

Answer 1

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

Answer 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）

下载 npm

https://nodejs.org/en/download/

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

NPM 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上：

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