Я только что провел последний месяц, создавая различные проекты на JavaScript, чтобы отточить свои навыки разработки программного обеспечения. После запуска примерно четырех проектов я обнаружил, что снова и снова повторял одни и те же шаги при настройке проекта. Стало слишком сложно искать ссылки, которые я использовал при настройке предыдущего проекта. Быстро стало очевидно, что было бы удобно, если бы все эти шаги были в одном месте, куда я мог бы легко добраться. Хм…. лишь бы было место для этого 🤔.
Прочитав несколько статей в Интернете, я решил составить этот пост, в котором будет представлен мой подход к созданию проектов. Надеюсь, он будет полезен и вам. В этом посте будут описаны шаги, необходимые для быстрой загрузки проекта JavaScript с использованием npm в качестве менеджера пакетов и webpack в качестве сборщика. Я также дам вам возможность попрактиковаться в некоторых передовых методах, включив зависимости для облегчения линтинга. Добро пожаловать 😉. Тогда давайте к этому.
НПМ
Начнем с менеджера пакетов npm. Это полезно для использования и обмена пакетами между разработчиками. Вы можете легко загрузить и установить его, выполнив шаги здесь (если он у вас еще не установлен, то есть 😅).
Как только это будет сделано, мы можем продолжить и создать каталог нашего проекта. Назовем его js-project. Вы можете сделать это, набрав в терминале следующее (конечно, без подсказки $ 😆.):
$ mkdir js-project
Здорово! Затем давайте изменим каталог на эту папку, а затем инициализируем npm. В терминале/командной строке выполните следующую команду:
$ cd js-project && npm init
Вы сразу же увидите серию подсказок в своем терминале, после чего можете нажать клавишу enter на клавиатуре компьютера для каждой из них. После этого в корне каталога нашего js-project будет создан файл package.json. Файл package.json служит манифестом для нашего проекта. Это позволит разработчикам легко настроить этот проект и его зависимости в будущем.
Затем мы инициализируем git, а затем создадим файл .gitignore в каталоге нашего проекта. Вы можете добиться этого с помощью следующего:
$ git init && touch .gitignore
В файле .gitignore введите node_modules и сохраните. Это гарантирует, что git не отслеживает файлы, созданные из наших зависимостей, что может привести к раздуванию каталога нашего проекта. Вы также можете добавить в этот файл любые другие файлы (например, .DS_Store), которые не хотите отслеживать.
ЛИНТЕРЫ
Сделав это, давайте добавим в наш проект несколько файлов линтера. Мы будем заимствовать файлы линтера CSS и JavaScript из репозитория GitHub Microverse. Для JavaScript давайте сначала установим необходимые зависимости, выполнив команду ниже.
$ npm install --save-dev [email protected] [email protected] [email protected]
Теперь мы добавим файл .eslintrc.json в каталог нашего проекта. Это сохранит нашу конфигурацию для eslint. Вам следует скопировать файл отсюда.
Давайте сделаем то же самое и для CSS, не так ли? Запустите приведенную ниже команду, а затем скопируйте файл конфигурации (.stylelintrc.json) в каталог вашего проекта отсюда.
$ npm install --save-dev [email protected] [email protected] [email protected] stylelint-csstree-validatorКогда это будет сделано, ваш файл package.json теперь должен выглядеть немного иначе с дополнительной информацией, подобной этой:
"devDependencies": {
"eslint": "6.8.0",
"eslint-config-airbnb-base": "14.1.0",
"eslint-plugin-import": "2.20.2",
"stylelint": "13.3.3",
"stylelint-config-standard": "20.0.0",
"stylelint-csstree-validator": "1.8.0",
"stylelint-scss": "3.17.2"
}
Теперь мы можем проверить наши файлы JS и CSS с помощью npx eslint . и npx stylelint "**/*.{css,scss}" соответственно. Это может быть трудно запомнить в большинстве случаев, поэтому давайте добавим скрипт npm, чтобы запустить это для нас. В файле package.json добавьте следующее в раздел scripts.
"lint": "npx eslint . && npx stylelint "**/*.{css,scss}". Когда это будет сделано, мы можем запустить npm run lint, и все файлы JS и CSS будут проверены на наличие ошибок (убедитесь, что файлы JS и CSS присутствуют при запуске). Это легче запомнить, чем две команды, не так ли?
На этом этапе наша структура каталогов js-project должна выглядеть так, как показано ниже:
+-- node_modules/ +-- .eslintrc.json +-- .gitignore +-- .stylelintrc.json +-- package.json +-- package-lock.json
ВЕБ-ПАК
👏 Пока все хорошо. Теперь нам нужно решить небольшой вопрос интеграции Webpack для объединения наших файлов JavaScript в наш проект. Мы начнем с установки webpack, а затем создадим файл конфигурации для webpack. Чтобы установить веб-пакет, давайте запустим следующее:
$ npm install webpack webpack-cli webpack-dev-server --save-dev
Эти три зависимости помогут нам легко использовать веб-пакет, и они должны отображаться в package.json в разделе devDependencies. webpack-cli поможет нам запустить webpack в командной строке. webpack-dev-server также позволит нам запустить локальный сервер, который обновляет нашу веб-страницу каждый раз, когда мы вносим изменения в наши файлы. Подумайте о том времени, которое мы только что сэкономили, поскольку нам не нужно вручную обновлять веб-страницу каждый раз, когда мы вносим изменения в наш код. Круто, да? Теперь мы продолжим создавать наш файл конфигурации веб-пакета с touch webpack.config.js.
Нам нужно немного изменить структуру каталога нашего проекта, чтобы продолжить. Давайте создадим папку src/ в корневом каталоге, а затем создадим в ней файл index.js. Затем мы настроим webpack для использования файла index.js в качестве точки входа. Мы также скажем веб-пакету создать папку dist/ в корневом каталоге, в которую он может отправить файл выходного пакета (который мы назовем output.bundle.js). Чтобы сделать все это, давайте сделаем так, чтобы наш файл webpack.config.js выглядел следующим образом.
const path = require('path');module.exports = {mode: 'development',entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'output.bundle.js' } };
Отлично! Запустите npx webpack в терминале, и файл output.bundle.js будет создан в папке dist/. Теперь наша структура каталогов должна выглядеть так:
+-- dist/ | +--index.html | +--output.bundle.js +-- node_modules/ +-- node_modules/ +-- src/ | +-- index.js +-- .eslintrc.json +-- .gitignore +-- .stylelintrc.json +-- package.json +-- package-lock.json +-- webpack.config.js
Чтобы проверить, все ли работает как надо, откройте index.js и введите alert('Hello World!'). Откройте index.html в браузере и увидите оповещение с текстом "Hello world!" неожиданно возникнуть. Чудесно! 👏
Давайте немного облегчим себе задачу. Установите html-webpack-plugin, чтобы мы могли позволить webpack-dev-server открывать для нас наш файл index.html всякий раз, когда мы его запускаем. Он также будет обновлять страницу всякий раз, когда мы вносим какие-либо изменения в файл.
npm install html-webpack-plugin --save-dev
После его установки обновите конфигурацию вашего веб-пакета следующим образом:
const HtmlWebPackPlugin = require( 'html-webpack-plugin' );const path = require('path');module.exports = {mode: 'development',entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'output.bundle.js' },plugins: [ new HtmlWebPackPlugin() ]};
Поздравляем! 🎊 💫 🏆.
Вы сделали это так далеко! В завершение добавим еще несколько npm-скриптов в наш файл package.json. Продолжайте и отредактируйте наш раздел сценариев следующим образом:
"scripts": {
"lint": "npx eslint . && npx stylelint '**/*.{css,scss}'",
"start": "webpack-dev-server --mode=development --open",
"production": "webpack --mode=production"
},
С этим добавлением мы можем запускать npm start в терминале при разработке нашего проекта. Наша веб-страница будет автоматически обновляться при любых изменениях, которые мы вносим в наши файлы. Как только наш проект будет готов к работе, мы можем запустить npm run production, и webpack создаст наши файлы в папке dist/. Теперь эта папка готова к использованию в производственной среде.
Это все, что есть! 👯♂ 👯 💃 🕺Мы подошли к концу нашего маленького путешествия. Вы можете скачать уже готовый шаблон со всем, что уже настроено в этом репозитории. Все, что вам нужно сделать, это клонировать репозиторий и написать код в файле index.js. После этого запустите npm start и вуаля! Ваш код работает в браузере! Когда вы закончите, запустите npm run production, и веб-пакет создаст ваши файлы и выведет их в папку dist/, готовую к работе. Прохладный! 😎
Не стесняйтесь оставлять свои мысли, комментарии и предложения в комментариях. Вы также можете поделиться и проголосовать. Будем очень признательны 😉. Пока мы не встретимся снова! 👋
