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

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

Это означает, что после настройки этой среды вам не нужно настраивать ее снова. Давай начнем !!

Какой выбор остается сделать?

  • Управление пакетами
  • Комплектация
  • Минификация
  • Исходные карты
  • Транспортировка
  • Генерация динамического HTML
  • Централизованный HTTP
  • Mock API Framework
  • Линтинг
  • Библиотеки компонентов
  • Веб-сервер разработки
  • Автоматизированное тестирование
  • Непрерывная интеграция
  • Автоматизированные сборки
  • Автоматическое развертывание
  • Рабочий пример приложения.

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

Управление пакетами

Каждый язык, включая JavaScript, выигрывает от стандартизированного метода совместного использования кода, поэтому нам нужен менеджер пакетов.

В настоящее время в JavaScript есть много менеджеров пакетов, я перечислю несколько популярных менеджеров пакетов, и мы выберем npm в качестве менеджера пакетов для этого руководства.

Когда-то Bower был самым популярным менеджером пакетов для Интернета, но сегодня npm решительно захватил его.

npm - это крупнейший в мире реестр программного обеспечения. В реестре содержится более 800 000 пакетов кода. Разработчики с открытым исходным кодом используют npm для обмена программным обеспечением.

JSPM означает диспетчер пакетов JavaScript. Это тоже интересный вариант, который стоит попробовать.

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

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

Давайте настроим npm для нашего проекта.

  1. Убедитесь, что на вашем компьютере установлен NodeJs. Если у вас не установлен node js, посетите и установите его
  2. Запустите npm init -y. Флаг -y означает, что вы используете значения по умолчанию.
  3. Скопируйте следующие зависимости разработчиков в этот файл package.json и вставьте их в свой package.json, потому что мы не хотим устанавливать каждый пакет один за другим. Позже мы исследуем, что делает каждый из этих пакетов. Package.json хранит список используемых нами пакетов и скриптов.
"devDependencies": {
"babel-cli": "6.26.0",
"devDependencies": {
"babel-cli": "6.26.0",
"babel-core": "6.26.3",
"babel-loader": "8.0.6",
"babel-preset-latest": "6.24.1",
"babel-register": "^6.26.0",
"chai": "4.2.0",
"chalk": "^2.4.2",
"cheerio": "0.22.0",
"compression": "1.7.4",
"cross-env": "5.2.0",
"css-loader": "3.0.0",
"eslint": "5.16.0",
"eslint-plugin-import": "2.17.3",
"eslint-watch": "5.1.2",
"express": "^4.17.1",
"extract-text-webpack-plugin": "3.0.2",
"html-webpack-plugin": "3.2.0",
"jsdom": "^15.1.1",
"json-schema-faker": "0.4.7",
"json-server": "0.15.0",
"localtunnel": "^1.9.2",
"mocha": "^6.1.4",
"nock": "10.0.6",
"nodemon": "^1.19.1",
"npm-run-all": "^4.1.5",
"nsp": "3.2.1",
"numeral": "2.0.6",
"open": "6.3.0",
"rimraf": "2.6.3",
"style-loader": "0.23.1",
"surge": "0.21.3",
"webpack": "4.34.0",
"webpack-dev-middleware": "3.7.0",
"webpack-hot-middleware": "2.25.0",
"webpack-md5-hash": "0.0.6"
}

5. Запустите npm install, чтобы установить все зависимости в файл package.json. После завершения установки вы увидите каталог с именем node modules. Если вам интересно, вы можете перемещаться по node modules , и вы поймете, что в ней находятся модули установленных нами пакетов.

Веб-сервер разработки

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

В этом разделе мы собираемся;

  • Настройте выбранный нами веб-сервер разработки так, чтобы мы могли просматривать результаты в браузере, как только нажмем «Сохранить».
  • Перечислите другие варианты веб-сервера, которые стоит изучить.
  • Узнайте, как поделиться своей незавершенной работой с другими.

Давайте настроим ExpressJs в качестве нашего сервера разработки, потому что: -

  • Это легко настраиваемый, популярный и простой в использовании.
  1. Создайте файл с именем server.js в корне и вставьте следующий код.
const express = require('express');
const path = require('path');
const open = require('open');
const port = 3000;
const app = express();
app.get('/', function(req, res){
res.sendFile(path.join(__dirname, './client/index.html'))
})
app.listen(port, function(err){
if(err){
console.log(err)
}else{
open('http://localhost:'+port)
}
});
  • В приведенном выше фрагменте мы импортируем express, который мы установили ранее при запуске npm install. Мы также импортируем path и open.
  • Когда затем объявляете переменную, порт и установите для нее значение 3000, а затем создайте экземпляр express.
  • Мы говорим, что любые ссылки на корень (‘/’) должны обрабатываться функцией обратного вызова, которая принимает request и response и возвращает index.html в каталоге клиента.
  • Давайте продолжим и создадим каталог с именем client и внутри client добавим index.html.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Js Article</title>
</head>
<body>
<h1>JavaScript Dev env Article</h1>
</body>
</html>
  • Давайте запустим следующую команду, чтобы запустить наш сервер
node server.js

Веб-сервер должен запуститься и открыть ваш браузер по умолчанию, чтобы показать содержимое, которое мы включили в наш index.html.

Другие варианты, которые стоит рассмотреть, включают:

Обмен информацией о незавершенной работе с вашей командой / клиентом.

Это помогает держать вашего клиента / команду в курсе каждого изменения / прогресса, которое вы делаете, без настройки облачного провайдера, такого как Heroku или AWS, и его бесплатного использования. Есть много интересных вариантов, чтобы поделиться своей незавершенной работой, но мы собираемся использовать Localtunnel, потому что его очень просто настроить.

Чтобы установить Localtunnel, запустите в своем терминале следующее:

npm install local tunnel -g
start the app
lt --port 3000

Другие варианты, которые стоит рассмотреть для этой услуги, включают:

Автоматизация

Автоматизация экономит время при разработке. Я знаю 3 популярных варианта автоматизации: Грант, Глоток и npm скрипты.

скрипты npm

  • Они объявлены в packages.json под ключом scripts.
  • Они используют командную строку вашей операционной системы.
  • Они напрямую используют пакеты npm, и вы можете разделить сценарии узлов в одной командной строке, это слишком сложно.

Настроить скрипт npm

"scripts": {
"start": "nodemon --exec babel-node server.js"
}

теперь вместо того, чтобы запускать наш сервер, набрав node server.js, нам просто нужно запустить npm start в нашем терминале, и nodemon будет продолжать перезапускать наш сервер каждый раз, когда мы вносим изменения в наш код, что делает его очень интересным!.

Транспилинг

Зачем транспилировать?

  • Одна из причин переноса JavaScript заключается в том, чтобы дать возможность всем браузерам понять новые и экспериментальные функции, которые они еще не поддерживают.
  • Еще одна причина для переноса - некоторые люди предпочитают разрабатывать на других языках, а затем просто переносить обратно на JavaScript. интересно !! :-)

Давайте настроим Babel, который мы выберем.

  • Для настройки babel вам понадобятся следующие пакеты npm. Но тогда мы не будем устанавливать, так как уже сделали.
babel-cli
babel-core
babel-loader
babel-preset-latest
babel-register
  • давайте создадим файл с именем .babelrc в корне нашего проекта и добавим следующий код.
{
"presets":["latest"]
}
  • Теперь, когда наша конфигурация завершена, давайте проверим ее, изменив наш server.js для использования импорта Es6.
import express from 'express'
import path from 'path';
import open  from 'open';
const port = 5000;
const app = express();
app.get('/', function(req, res){
res.sendFile(path.join(__dirname, './client/index.html'))
})
app.listen(port, function(err){
if(err){
console.log(err)
}else{
open('http://localhost:'+port)
}
});

Когда мы снова запускаем npm start, он должен выдать такую ​​ошибку, потому что узел еще не понимает imports.

Чтобы исправить это, нам нужно изменить наш сценарий запуска npm на babel-node server.js.

Итак, когда мы запускаем npm start, наш сервер работает без ошибок, а это означает, что наша настройка babel работает так, как ожидалось.

Комплектация

Пакеты npm используют шаблон CommonJs, во многом с которым узел может справиться, браузеры не понимают CommonJ, поэтому необходимо объединять пакеты npm в формат, который может использовать браузер.

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

Мы собираемся использовать модули ES6, потому что;

Давайте настроим webpack, который мы выберем.

  • Давайте создадим файл с именем webpack.config.dev.js в корне нашего проекта, чтобы настроить наш веб-пакет для разработки и вставить этот код.
import HtmlWebpackPlugin from 'html-webpack-plugin';
import path from 'path';
export default {
entry: [
path.resolve(__dirname, 'server.js')
],
output: {
path: path.resolve(__dirname, 'src'),
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: 'client/index.html',
inject: true
})
],
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loaders: ['babel']},
{test: /\.css$/, loaders: ['style','css']}
]
}
}

Документы Webpack предоставляют множество вариантов настройки webpack, и это лучшее место для справки. Я проведу вас через приведенные выше конфигурации, чтобы дать вам обзор того, как настроен веб-пакет.

Затем мы экспортируем объект внутрь этого объекта;

  • entry point: Есть несколько способов определить свойство entry в вашем веб-пакете. Webpack принимает строку или массив точек входа, что упрощает внедрение промежуточного программного обеспечения.
  • output: Настройка параметра конфигурации output сообщает webpack, как записывать скомпилированные файлы на диск. Мы сообщаем веб-пакету, где он должен создать наш комплект разработчика. Обратите внимание, что webpack не создает никаких физических файлов, он будет обслуживать нашу сборку из памяти.
  • plugins: Предназначены для добавления некоторых дополнительных подключаемых модулей для повышения мощности веб-пакета, примеры таких подключаемых модулей включают: горячая перезагрузка, кеширование, линтинг и т. д.
  • module: помогает определить типы файлов, которые мы хотим обрабатывать с помощью webpack.

Давайте настроим webpack для работы с нашим экспресс-сервером.

В нашем server.js давайте импортируем веб-пакет и конфигурации, которые мы только что создали выше, чтобы server.js выглядел как файл ниже.

import express from 'express'
import path from 'path';
import open  from 'open';
import webpack from 'webpack';
import config from './webpack.config.dev';
const port = 5000;
const app = express();
const compiler = webpack(config);
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true,
publicPath: config.output.publicPath
}))
app.get('/', function(req, res){
res.sendFile(path.join(__dirname, './client/index.html'))
})
app.listen(port, function(err){
if(err){
console.log(err)
}else{
open('http://localhost:'+port)
}
});

В приведенном выше файле мы настраиваем экспресс для использования промежуточного программного обеспечения webpack-dev-middleware и передаем ему конфигурацию webpack, которую мы создали.

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

Это конец первой части статьи. продолжим в нашей части 2.

Часть 2 будет содержать: -

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