Если вы разрабатываете с помощью Node.js, вам будет приятно использовать кучу модулей и сэкономить время.
Но, в вашей передней части. Вы не можете использовать «требовать» или «импортировать» что-либо.
Если бы вы попробовали это. Вы могли видеть эту ошибку.
Uncaught Reference Error: require is not defined at [your script]
or
Uncaught SyntaxError: Cannot use import statement outside a module.
Итак, что вы должны сделать?
- сделайте исходный файл, используя require или import, как хотите.
- Преобразуйте исходный код в пакетный файл скрипта, который понимает браузер, используя модуль «Browserify».
- загрузите файл сценария пакета из вашего внешнего интерфейса.
Давайте следовать шагу с практикой.
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.