https://codesandbox.io如何在本地版本上实现依赖关系

Question

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

我下载了这些文件

我需要包括依赖项，正如我从json包文件中看到的那样：

｛
"名称"："条形图竞速起始符"，
版本："1.0.0"，
描述："，
主要："index.html"，
脚本：｛
开始："package index.html--打开"，"构建"："地块构建索引.html">
｝，
"；依赖关系"：{
"@types/d3"devDependencies"：{
"@babel/core"关键字"：[]
}


我获取了依赖项

<script src="；https://d3js.org/d3-axis.v1.min.js"gt<脚本>
<script src="；https://d3js.org/d3.v5.min.js"gt<脚本>


我将它们粘贴到index.html
我保存了index.html

我尝试通过浏览器运行它：
Uncaught SyntaxError:导入声明可能只出现在模块的顶层

src文件夹有一个索引.js
webconsole complains at this line: import "./styles.css";

即使我解决了问题，并通过
将styles.css包含到html页面中

<链接rel＝"；样式表"；type＝"；text/css"href="src>样式.css">

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

哭泣，这是index.js

的第2行

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

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

Answer 1

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_(软件(

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的包将不会被安装。这样就可以排除只用于开发的包。

例如，linters用于强制执行干净的代码，但在生产中并不必要。您将包含一个linter包作为devDependency，这样您就可以在本地针对代码运行linter，而无需将其包含在生产构建中。npm安装(带--production(

下载npm

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

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

用于在windows上安装npm：

https://phoenixnap.com/kb/install-node-js-npm-on-windows

要在windows上保存codesandbox.io：

1. 保存zip文件
   
2. 将zip文件提取到文件夹中
   
3. 打开命令提示符
   
4. 发出npm命令：npm install<路径到具有封装的文件夹&gt--保存
   
   

Answer 2

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