Новое в node.js; нужна помощь в импорте модуля npm в мой интерфейсный проект vanilla JS

Позвольте мне предварить это, признав, что я новичок в node.js и веб-разработке в целом. Я прочесывал stackoverflow и искал решение в Google, но безрезультатно. В основном, я не уверен, какие шаги мне нужно предпринять, поскольку я впервые пробую использовать модули npm.

По сути, я создал статический веб-сайт для своего друга, который позволяет пользователям добавлять свои собственные каламбуры к уже существующему массиву каламбуров, вдохновленных именами ее кошек. Затем сайт рандомизирует массив, если пользователи хотят просматривать каламбуры по одному. Для представленных материалов я уже установил ограничения на то, что пользователи должны писать что-то между 0-50 символами, содержащее хотя бы одно из имен ее кошек. Функциональность сайта была написана на ванильном JS. Однако программа еще не учитывает отправленные тарабарщины, которые в остальном соответствуют указанным выше требованиям (например, «alksdjjsd Cat name slkjsd»). Это последний шаг, который завершит работу над сайтом.

Чтобы исправить это, я хотел бы добавить в свой проект этот модуль npm. < / strong> Я протестировал модуль, и он смог правильно отделить бессмысленные представления от представлений, не являющихся бессмысленными, в моем массиве. Проблема только в том, что я понятия не имею, как действовать.

Естественно, я установил пакет в узел, а затем скопировал / вставил оператор импорта - в соответствии с инструкциями по использованию - прямо в мой файл .js, но потом я понял, что пакет не запускается в браузере. Итак, я установил node.js и создал package.json со следующими зависимостями:

  "devDependencies": {
    "browserify": "^16.5.0",
    "watchify": "^3.11.1"
  },
  "dependencies": {
    "asdfjkl": "0.0.6"
  }

Как вы, возможно, догадались, я также создал файл bundle.js, который я связал в теге сценария в моем файле index.html <script src="bundle.js"></script> со следующим также в моем файле package.json:

  "main": "index.js",
  "scripts": {
    "build": "browserify index.js -o bundle.js",
    "watch": "watchify index.js -o bundle.js"
  },

Однако мне все еще неясно, как мне следует следовать инструкциям по использованию в модуле npm. Я не могу использовать предложенный оператор импорта:

import asdfjkl from 'asdfjkl';

в моем коде (файлы index.js / bundle.js) без просмотра ошибок в моем терминале, таких как «ParseError: 'import' и 'export', могут появляться только с 'sourceType: module' "или

import asdfjkl from 'asdfjkl';
       ^^^^^^^

SyntaxError: Unexpected identifier

Я заметил, что многие люди с подобной проблемой используют такие инструменты, как Babel, Gulp и другие пакеты, но я не могу сказать, какие инструменты мне могут понадобиться, и я определенно не понимаю, как их использовать.

Любые рекомендации о том, как включить этот пакет в мой интерфейсный проект, были бы ОЧЕНЬ благодарны. Заранее большое спасибо!


Изменить: решение


Чтобы функция asdfjkl() работала, мне пришлось написать

var asdfjkl = require('asdfjkl').default;

Для других, у которых эта проблема требует разъяснения, я считаю полезным этот ответ.


person Crystal    schedule 26.09.2019    source источник


Ответы (2)


Импорт и экспорт - это функции из ECMAScript 6 (http://es6-features.org/#ValueExportImport ), поэтому я предполагаю, что вы не используете какой-либо компилятор Javascript (например, Babel https://babeljs.io/docs/en/). Но если вы не хотите использовать какой-либо компилятор, вы можете просто изменить код для импорта библиотеки следующим образом:

var asdfjkl = require('asdfjkl');
person Riccardo Gai    schedule 26.09.2019
comment
Спасибо, что указали мне правильное направление! Я просто попробовал код var asdfjkl = require('asdfjkl');, как вы предложили, и получил эту ошибку в терминале: console.log(asdfjkl('hello')); TypeError: asdfjkl is not a function, а также Uncaught ReferenceError: asdfjkl is not defined в браузере. Не знаю почему. Если окажется, что Babel - лучший вариант, есть ли какие-то конкретные пакеты, которые вы бы порекомендовали для этого конкретного проекта? Я понимаю, что с Babel связано так много разных пакетов, что это немного пугает. - person Crystal; 26.09.2019
comment
Мне кажется странным, что это не работает, я видел, как вы использовали browserify, и посмотрел на первый пример (browserify.org/#install), попробуем построить еще раз. В любом случае, здесь вы можете найти хороший пример, как немного поиграть с babel с помощью vanilla app medium.com/backticks-tildes/ - person Riccardo Gai; 26.09.2019
comment
Спасибо за ссылки! Я пойду и внимательно их прочту, немного посплю, немного поиграю с кодом завтра. Я сообщу вам о любых изменениях - person Crystal; 26.09.2019
comment
Я понял это, возясь с различными операторами импорта в файлах пакета runkit.js и test.js. По какой-то причине эта строка кода сработала: var asdfjkl = require('asdfjkl').default; - person Crystal; 26.09.2019

Вы можете установить пакет npm, используя npm install --save

пример: npm install asdfjkl --save

person NSR    schedule 26.09.2019
comment
Спасибо за ваш ответ! Я должен был написать, что это был первый шаг, который я сделал. Сначала я установил пакет так: npm install asdfjkl --save, а затем я попытался использовать оператор импорта, как предложено в ссылке, но у меня это не сработало. - person Crystal; 26.09.2019
comment
Можете ли вы найти установленный пакет в папке node_modules? - person NSR; 26.09.2019
comment
да. Я также пытался импортировать asdfjkl из файла пути ('node_modules / asdfjkl / lib / asdfjkl.js' ... или что-то в этом роде), но не повезло - person Crystal; 26.09.2019