https://codesandbox.io как реализовать зависимости от локальной версии

Я наткнулся на проект, который показался мне интересным.
https://codesandbox.io/s/bar-chart-race-eop0s?file=/src/index.js

Я загрузил файлы.

Мне нужно, чтобы зависимости были включены, как я вижу в файле пакета json:

{
name: bar-chart-race-starter,
version: 1.0.0,
description:,
main: index.html,
scripts: {< br /> 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,
parcel-bundler: ^ 1.6.1
},
ключевые слова: []
}


Я получил зависимости.

‹Скрипт src = https: //d3js.org/d3-axis.v1.min.js› ‹/script›
‹скрипт src = https: //d3js.org/d3.v5.min.js› ‹/Script›


Я засунул их в index.html
Я сохранил index.html


Я пытаюсь запустить его через браузер:
Uncaught SyntaxError: объявления импорта могут появляться только на верхнем уровне модуля

В папке src есть index.js
webconsole complains at this line: import "./styles.css";

даже если я использую обходной путь и включу файл styles.css в страницу html через

‹Ссылка rel = styleheet type = text / css href = ./src› /Styles.css / ›

затем он плачет о
import { generateDataSets } from "./dataGenerator";

, которая является строкой 2 index.js

Я делаю что-то не так, реализуя локальную версию этого проекта.

Может ли кто-нибудь указать, в чем я ошибаюсь?
Это должно быть намного проще.
Помощь Пожалуйста, загрузите локальную версию, включая зависимости проекта codeandbox.io.


person John    schedule 05.08.2020    source источник


Ответы (2)


Вам также необходимо установить devDependencies (npm i -D), а затем запустить npm start.

person Julia    schedule 05.08.2020
comment
спасибо @julia за то, что указали мне в правильном направлении. - person John; 07.08.2020

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) < br />

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

Так в чем разница? Пакеты, включенные как devDependencies, не будут установлены, если используется необязательный флаг --production. Это позволяет исключить пакеты, которые вам нужны только для разработки.

Например, линтеры популярны для обеспечения чистого кода, но не нужны в производственной среде. Вы должны включить линтер-пакет как devDependency, чтобы вы могли запускать линтеры для вашего кода локально, не включая его в производственную сборку. npm install (с --production)

для загрузки npm

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

NPM против Bower против Browserify против Gulp против Grunt против Webpack

NPM против Bower против Browserify против Gulp против Grunt против Webpack

для установки npm в Windows:

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

чтобы сохранить кодыandbox.io в Windows:

  1. сохраните zip-файл.
  2. извлеките zip-файл в папку.
  3. откройте командную строку.
  4. введите команду npm: npm install ‹pathtofolderwithpackage› --save

person John    schedule 07.08.2020