Итак, я хочу написать новый школьный код Javascript, используя эти причудливые толстые стрелки, распространять классные операторы и классные классы. Добавьте щепотку контроля версий и подключите его к сети, чтобы я мог работать в любое время и в любом месте, когда приходит вдохновение.

Это не так просто, как раньше; создание html-файла и помещение кода в теги скрипта. Но тогда приложения, которые мы создаем, уже не такие простые, как раньше.

В этом руководстве показано, как настроить современный каркас рабочего процесса разработки Javascript.

Администрирование

Если у вас его еще нет, скачайте Node.

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

Node — это (более или менее) движок Javascript, вынесенный из браузера, так что JS можно написать и для сервера. Оказывается, это действительно эффективно для определенных типов приложений. Потоковая передача данных и приложения в реальном времени особенно хорошо сочетаются с неблокирующим и асинхронным способом работы Node.

Для наших целей мы будем использовать его в основном для менеджера пакетов: NPM, который, вероятно, является самой безболезненной системой добавления модулей и управления зависимостями, с которой я когда-либо сталкивался.

Если вы хотите добавить внешнюю кодовую базу, вы просто

npm install –save some-module

И в 99% случаев это просто работает.

Кто знал ? (конечно, не мальчики и девочки Java: p)

Мы собираемся использовать систему контроля версий, потому что сейчас не 19 век, и, синхронизировавшись с онлайн-репозиторием, мы сможем делиться и использовать нашу среду и проекты где угодно.

Git в значительной степени является стандартом для VCS, и хотя многие используют github (что является хорошим выбором), я решил использовать битбакет для наших облачных возможностей.

Прежде всего, создайте учетную запись Bitbucket на



Битбакет | Решение Git для профессиональных команд
Совместная работа над кодом с помощью встроенных комментариев и запросов на вытягивание. Управляйте своими репозиториями Git и делитесь ими, чтобы создавать и отправлять…bitbucket.org



затем загрузите git для окон

https://gitforwindows.org/

который поставляется с прекрасной оболочкой. В котором можно вводить такие вещи, как

ls -la

Поскольку мы находимся в разделе администратора, мы могли бы также войти в битбакет и создать новый пустой репозиторий (место для хранения версий) для нашего проекта.

Щелкните маленький синий значок + (создать новый) на домашней странице Bitbucket, затем щелкните репозиторий.

Вы получите такой экран ::

Дайте вашему репозиторию имя (я назвал свой «es6dev») и нажмите создать репозиторий.

Как только битбакет сделает свое дело, он покажет вам страницу с некоторой информацией о вашем недавно созданном репозитории.

Важным моментом здесь является ссылка, которую мы будем использовать, чтобы связать наш локальный код с кодом в облаке, и она будет выглядеть примерно так:

git clone https://[email protected]/omrisuleiman/es6dev.git

Запустите командную оболочку Windows, перейдите в каталог проектов (в этом примере я использую c:/projects), затем скопируйте и вставьте ссылку из git hub. Вы получите сообщение о копировании пустого репозитория, все хорошо, мы это знали.

Git создаст новый подкаталог в папке проектов. Cd в это, потому что пришло время начать получать наши модули, затем запустите

npm init -y

Эта команда инициализирует наш новый проект. Флаг -y сообщает диспетчеру пакетов узла, что мы согласны с использованием настроек по умолчанию.

Это займет несколько секунд (что меня испугало в первый раз, но не волнуйтесь), потом вы увидите что-то вроде этого::

Если вы заглянете в каталог, вы увидите, что NPM настроил базовый файл конфигурации для нашего проекта, который по соглашению вызывается

package.json

Этот файл является ключевым, и мы будем регулярно обращаться к нему по мере добавления модулей и задач в наш рабочий процесс.

Прямо сейчас это будет похоже на ::

{
  "name": "es6dev",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://[email protected]/omrisuleiman/es6dev.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "homepage": "https://bitbucket.org/omrisuleiman/es6dev#readme"
}

Чтобы все было чисто, мы поместим наш исходный код в отдельный каталог, поэтому в каталоге es6dev создайте папку «src».

Вы можете сделать это из проводника Windows или с помощью git bash.

mkdir src

До сих пор все это было теоретически, так что давайте на самом деле напишем немного кода.

Откройте ваш любимый текстовый редактор, затем создайте файл с содержимым

console.log("hello world");

Сохраните его как index.js в вашем каталоге src.

Теперь пришло время проверить, все ли работает как задумано. Перейдите на уровень выше в каталог es6dev и введите

node src/index.js

И, если все пойдет по плану, вы получите это ::

Все идет нормально.

Теперь давайте подготовимся к совершенству ES6, изменив содержимое index.js на

let hello = () => {console.log("hello world");}
hello();

Ячейку в контрольном списке «Администрирование» мы должны отметить, создав место, где будет жить наш код распространения, как только весь наш прекрасный исходный код ES6 будет готов в прайм-тайм. Кажется справедливым назвать это dist да?

Давайте создадим эту папку под папкой es6dev на том же уровне, что и src.

mkdir dist

Ну, я упаковал и упаковал.

Я кодирую всю ночь напролет. Саундтрек Muddy Waters не является обязательным для следующей части.

Поскольку мы больше не запускаем код напрямую с HTML-страниц, мы будем использовать процесс сборки: набор задач, которые делают наш код готовым к работе.

Одной из ключевых частей этого процесса является приложение командной строки под названием webpack. Он делает множество интересных вещей, и прямо сейчас мы собираемся использовать одну из самых популярных функций, которая берет все файлы javascript, на которых работает наш проект, и объединяет их все вместе. Это хороший способ сделать что-то, потому что мы можем разделить наш код на модули, что означает конец этих 1000-строчных громоздких скриптов, пока мы разрабатываем, но снова сшиваем их вместе для развертывания. Страницы загружаются быстрее, когда есть только один вызов ‹script› вместо сотен.

В нашем производственном HTML мы будем вызывать и использовать наш код Javascript с простым

<script src=”./bundle.js”></script>

Прежде чем двигаться дальше и устанавливать модули узла веб-пакета, стоит потратить минуту, чтобы объяснить два разных способа добавления модулей в наш проект. Один

node --save some-module-name

Это говорит узлу, что мы будем использовать этот модуль как часть нашего основного программного обеспечения, которое должно распространяться как часть рабочей среды выполнения. Что-то вроде jQuery было бы хорошо здесь. Клиентским машинам это нужно для запуска нашего приложения.

Другой режим, в котором могут быть установлены модули узлов, — это модули разработки — код, который полезен только для разработки; транспайлеры, линтеры, uglyfiers и т. д. Они не будут поставляться с нашим окончательным приложением, что сделает его компактным, подлым и превосходным. Webpack прекрасно вписывается в эту категорию, так что давайте добавим его в наш проект с помощью (из базовой папки es6dev)

npm install --save-dev webpack webpack-dev-server webpack-cli

Это может занять несколько минут, но опять же, не волнуйтесь. Все получится.

Через некоторое время вы должны увидеть что-то подобное в окне вашей оболочки ::

когда он будет завершен, в вашем каталоге появится куча новых вещей, и если вы снова откроете package.json, вы увидите, что прекрасный npm обновил ваши настройки, чтобы включить это

"devDependencies": {
"webpack": "^4.39.0",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
}

мы также только что установили удобный мини-сервер для разработки, чтобы мы могли протестировать наш связанный код. Думайте об этом как о мини-WAMP или XAMPP.

Вавилон

Мы знаем, что ES6 прекрасен и все такое, но пока не каждый браузер готов к нему. Вот тут-то и появляется очень классный инструмент под названием Babel. Он чем-то похож на компилятор, поскольку он берет наш ньюскул Javascript и преобразует его в олдскульный Javascript, понятный каждому браузеру. CD в ​​директорию es6dev, и давайте добавим Babel в наши пакеты ::

npm install --save-dev @babel/core @babel/preset-env babel-loader

Как только он закончит взбивать, вы должны увидеть что-то вроде этого ::

Время настройки

Почти там ! У нас все установлено, осталось только все настроить.

Начнем с настройки Babel. Это делается через файл с именем «.babelrc», что должно быть достаточно просто. Но Windows немного нервничает, когда вы пытаетесь создать файл, начинающийся с точки. Обходной путь для этого — использовать оболочку git bash для создания файла, набрав

touch .babelrc

Затем вы можете открыть этот файл в редакторе по вашему выбору и скопировать и вставить следующий код

{
"presets": [
"@babel/preset-env"
]
}

Сохраните его, и давайте перейдем к настройке нашего сервера разработки веб-пакетов.

Создайте новый файл в своем любимом редакторе и добавьте следующие строки

module.exports = {
entry: './src/index.js',
module: {
rules: [
  {
    test: /\.(js)$/,
    exclude: /node_modules/,
    use: ['babel-loader']
 }
]
},
resolve: {
  extensions: ['*', '.js']
},
output: {
  path: __dirname + '/dist',
  publicPath: '/',
  filename: 'bundle.js'
},
devServer: {
    contentBase: './dist'
  }
};

Затем сохраните его как

webpack.config.js

Эта конфигурация указывает веб-пакету транспилировать каждый файл .js, который он встречает в нашем каталоге src, но игнорировать все, что является модулем узла. Он также указывает, что весь наш исходный код должен быть склеен в «bundle.js» в папке «/dist», и что при запуске сервера разработки корневой каталог будет сопоставлен с «./dist».

Последняя часть конфигурации, которую нам нужно сделать, находится в package.json, так что откройте его; вы заметите, что он немного вырос с тех пор, как мы видели его в последний раз.

Под разделом скриптов и перед тестом добавляем точку входа «старт» (Скоро станет понятно, зачем мы это сделали!)

"scripts": {
  "start": "webpack-dev-server --config ./webpack.config.js --mode development",
"test": "echo \"Error: no test specified\" && exit 1"

Наконец-то! Время написать код :)

После всей этой работы пришло время насладиться плодами нашего труда.

Создайте файл index.html в папке dist и сделайте его примерно таким

<!DOCTYPE html>
 <body>
  <div id='testDiv'>
    Hey !
  </div>
  <script src="./bundle.js"></script>
 </body>
</html>

Главное, что он ссылается на «bundle.js», где будет собран весь наш транспилированный код.

Приготовьте бутылку шампанского, чтобы разбить сервер, потому что мы вот-вот запустимся!

Из типа каталога es6dev

npm start

Окно консоли будет мигать в течение нескольких секунд, а затем должно показать что-то похожее на это ::

Откройте браузер и перейдите к

http://localhost:8080/

И ОМГ, мы только что взялись и сделали это!

Прежде чем мы перейдем к более сложным темам в части 2, давайте скопируем все изменения, которые мы сделали, в наш онлайн-репозиторий cvs.

Дело в том, что мы хотим хранить только файлы, необходимые для воссоздания этого «релиза». Нет смысла отправлять все стандартные модули узла, и для наших текущих целей папка «dist» не имеет значения.

Мы можем указать git, какие файлы мы не хотим отправлять, указав их в файле .gitignore.

Это один из тех надоедливых файлов StartingWithAFullStop, которые Windows не любит, поэтому в оболочке git перейдите в корень проекта, затем выполните

touch .gitignore

Откройте этот файл для редактирования и отметьте некоторые файлы и каталоги как находящиеся вне репозитория.

Скопируйте и вставьте это в содержимое файла .gitignore и сохраните его.

# Don't track content of these folders
node_modules/
dist/

Любые строки, начинающиеся с «#», считаются комментариями.

Мы можем проверить состояние нашего локального репозитория с помощью

git status

Итак, давайте добавим все новые вещи, над которыми мы работали, в наш локальный репозиторий с помощью

git add .

Затем зафиксируйте наши изменения с помощью

git commit -m "Version 1 release"

Флаг «-m» позволяет нам указать сообщение о коде, который мы фиксируем, это полезно, если нам когда-нибудь понадобится оглянуться на проект и вспомнить, что, черт возьми, происходит, или когда другие люди работают над проектом. Старайтесь, чтобы сообщения были короткими и милыми.

Наконец, давайте обновим наш основной онлайн-репозиторий с помощью

git push

И мы закончили на этот раз.

Настройтесь на следующей неделе, чтобы добавить модули распространения, ветвление git, преимущества ES6 и многое другое.

огромное спасибо Пауло Савольди ( https://medium.com/@paooolino ) и его замечательной статье ( https://medium.com/netscape/a-modern-javascript-project-setup-b7842955d1d3), которая вдохновил меня на написание этого