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

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

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

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

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

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

УПРАВЛЕНИЕ ПАКЕТАМИ

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

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

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

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

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

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

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

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

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

  1. Убедитесь, что на вашем компьютере установлен Node js. Если у вас не установлен node js, посетите https://nodejs.org/en/ и установите его.
  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. После завершения установки вы сможете увидеть каталог с именем ~модули узла~. Если вам интересно, вы можете перемещаться по модулям узла, и вы поймете, что они содержат модули пакетов, которые мы установили при запуске ~ Команда установки npm~.

РАЗВЕРТЫВАНИЕ ВЕБ-СЕРВЕРА

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

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

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

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

  • Он легко настраивается, популярен и прост в использовании.
  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)
}
});
  • В приведенном выше фрагменте мы импортируем экспресс, который мы установили ранее, когда запускали `npm install`. Мы также импортируем path и open .
  • Затем установите порт 3000 для нашего случая, а затем создайте экземпляр Express.
  • Мы указываем, что любые ссылки на корень ('/') должны обрабатываться функцией обратного вызова, которая принимает запрос и ответ и возвращает индекс. html в каталоге клиента.
  • Давайте продолжим и создадим каталог с именем client и внутри клиента добавим index.html. Вы можете добавить любой html в ваш 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

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

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

  • http-сервер
  • живой сервер
  • экспресс (также может использоваться в производстве)
  • коа (также может использоваться в производстве)
  • хапи (также можно использовать в продакшене)
  • будо (интегрируется с браузером)
  • Сервер разработки веб-пакета (встроен в веб-пакет и отделяет ваше приложение от памяти)
  • БраузерСинхронизация()

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

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

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

Чтобы установить локальный туннель

1. $ npm install local tunnel -g 
2. start your app
3. $ lt --port 3000

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

  • нгрок
  • всплеск
  • в настоящее время

АВТОМАТИЗАЦИЯ

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

скрипты npm

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

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

"scripts": {
"start": "node server.js"
}

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

ТРАНСПИЛЯЦИЯ

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

  • Одна из причин транспиляции 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, это должно привести к такой ошибке, потому что node еще не понимает импорт.

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

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

ОБЪЕДИНЕНИЕ

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

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

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

  • Они стандартизированы
  • Делает код более читабельным и анализируемым
  • Es6 включает встряхивание дерева (устранение мертвого кода)

Давайте настроим наш предпочтительный сборщик webpack

  • Давайте создадим файл с именем webpack.config.dev.js в корне нашего проекта, чтобы настроить наш веб-пакет разработки и вставить этот код.
import HtmlWebpackPlugin from 'html-webpack-plugin';
import path from 'path';
export default {
entry: [
path.resolve(__dirname, 'server.js')
],
target: 'web',
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. Это лучшее место для справки. Я проведу вас через приведенные выше конфигурации, чтобы дать вам представление о том, как настроен веб-пакет.

Мы экспортируем объект, затем внутри этого объекта;

  • точка входа, webpack принимает массив точек входа, что упрощает внедрение промежуточного ПО.
  • target для Интернета, поскольку мы ориентируемся на браузер, это также может быть node, если вы настраиваете webpack для node.
  • output, мы сообщаем веб-пакету, где он должен создать наш пакет разработки. обратите внимание, что webpack не будет создавать никаких физических файлов, он будет обслуживать нашу сборку из памяти.
  • плагины предназначены для добавления некоторых дополнительных плагинов для повышения мощности веб-пакета, примеры таких плагинов включают в себя; горячая перезагрузка, кеширование, линтинг и т.д.
  • Модуль поможет определить типы файлов, которые мы хотим обрабатывать с помощью webpack.

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

В наш server.js давайте импортируем webpack и конфиги, которые мы только что создали выше, чтобы 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» и передаем ему конфигурацию веб-пакета, которую мы сделали.

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

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

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

  • исходные карты
  • корпия
  • тестирование и непрерывная интеграция
  • Http-вызовы (выборка API, имитация HTTP и т. д.)
  • производственная сборка и производственное развертывание.

Спасибо. комментарии, исправления и дополнения к этой статье будут высоко оценены.