Если вы разрабатываете с помощью Node.js, вам будет приятно использовать кучу модулей и сэкономить время.

Но, в вашей передней части. Вы не можете использовать «требовать» или «импортировать» что-либо.

Если бы вы попробовали это. Вы могли видеть эту ошибку.

Uncaught Reference Error: require is not defined at [your script]

or

Uncaught SyntaxError: Cannot use import statement outside a module.

Итак, что вы должны сделать?

  1. сделайте исходный файл, используя require или import, как хотите.
  2. Преобразуйте исходный код в пакетный файл скрипта, который понимает браузер, используя модуль «Browserify».
  3. загрузите файл сценария пакета из вашего внешнего интерфейса.

Давайте следовать шагу с практикой.

1. установить браузер

npm i browserify

Напишите свой код в каталоге, отличном от каталога для представлений.

Я не буду включать этот файл в свой HTML.

2. строить с помощью браузера.

Запишите этот скрипт в ваш package.json. Или просто выполните эту команду в командной строке.

Browserify будет работать над созданием понятного интерфейса для вас в указанном месте (./public/bundle.js)

3. Включите преобразованный файл из вашего HTML

Вам не нужно писать код для bundle.js. Вам просто нужно написать любой код в app.js и конвертировать с помощью браузера.

Но.

это раздражает всякий раз, когда вы изменяете файл src, который вам нужно снова конвертировать.

Итак, давайте сделаем это автоматически.

установить часы

npm i watchify

и используйте это вместо использования Browserify.

Он будет автоматически создавать bundle.js всякий раз, когда вы изменяете исходный файл.

Это соответствует nodemon, когда вы используете команду node.

Дополнения.

С несколькими пакетами