Автор оригинала: FreeCodeCamp Community Member.

Аминь Мохамед Аджани

От менеджеров пакетов к Eslint, Commonjs до модулей AMD и ES6 для Babel и WebPack – это много инструментов! В этой статье мы перенесем старое приложение Angularjs, где мы декодируем инструменты сейчас.

Я устал…

Да, я получил усталость Cегодня.

Как умирает ваш проект? #javascript pic.twitter.com/zhSlmrAEZU

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

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

Давайте начнем!

Что мы строите

Ничего фантастического. Мы строим веб-приложение, которое выбирает некоторые случайные пользователи с API и отображают его на переднем углу. У него будет Нет маршрутизации Extraoryaire . Конечная цель статьи состоит в том, чтобы оборудовать вас привыкнуть к Frontend Tooling.

Я использую Angularjs без котельной, поэтому мы, которые не отстраивались от клиса, которые оставляют нас задыхаться и в AWE от Black Magic Funnery. Примечание: я использую Angularjs и не угловые. Angularjs, потому что я не мог найти никаких постов, связанных с Angularjs Tooling и объединением.

Давайте начнем с создания файла индекса в нашем корневом каталоге.

    
    



    
Random User!

Старые добрые времена ня. Получил файл Angularjs и минимальную структуру CSS из CDN, а затем мы начнем готовить наш код JavaScript и продолжаете прикрепить его к линейке индекса по строке.

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

Введите менеджеры пакетов

Таким образом, многие люди прибегают к управлению пакетами, который отслеживает версию зависимостей, которые они используют на их проекте. Управляющие пакетами Single Summer USP – перейти к Github в зависимости, загрузите его в папку и отслеживать скачащую версию. Это поможет вам не сломать свой код, если вы переместите свое репо и позже скачайте другую версию.

Был Duojs , JSPM , Bower , NPM И теперь есть:

Представляя пряжу: новый менеджер пакетов для JavaScript из @fbopensource , @tildeio. , @googledevs & @exponentjs Отказ https://t.co/2LfN5OXjOv

Идти вперед, установить Это. Нам понадобится это. Когда мы Добавить Зависимость в нашем приложении пряжа будет загружать вещи и сохранить его внутри папки Node_Modules. С тех пор , если вам нужен файл, вы можете SRC-ссылку в свой индекс.

yarn add angular

Пока мы делаем это, давайте также добавим app.js, usercontroller.js и файлы userfactory.js в нашем корневом каталоге и соединяйте их в наш файл индекса.

App.js:

/**
 * /app.js
 */

var app = angular.module("RandomApp", []);

userfactory.js:

// /userFactory.js
app.factory("UserF", function($http) {
    var UserF = {};
    UserF.getUsers = function(){
        return $http({
            method: 'GET',
            url: 'https://www.reqres.in/api/users',
        })
    };
    return UserF;
});

Usercontroller.js:

// /userController.js
app.controller("userController", function($scope, UserF){
    $scope.users = [];
    UserF.getUsers()
        .then(function(res) {
            $scope.users = res.data.data;
        })
});

index.html:

    
    
    
    
    



    
Random User!
    

        

            

                

                    
                
                

                    
{{user.first_name}} {{user.last_name}}
                
            
        
    

Проблемы с этим подходом

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

Еще одна семантическая проблема с этим кодом состоит в том, что этот код использует анонимные функции. Анонимные функции – это бон, так и Bane для JavaScript. Всегда называйте свою анонимную функцию. Он облегчает отладку стопки.

Теперь не было бы круто, если бы у нас могли бы полиция JS, которая указала на нас этот материал, пока мы написали?

Eslint.

Eslint – это Линтер. Вид, как кодовое сопряжение с более строгивой версией вас. ЛИНТЕРЫ Экономьте время для вас, отладки кода, прежде чем даже запустить свое приложение. Также это заставляет вас и вашей команды следовать правилам чистого кода. Кто говорит нет такого удивительного учителя?

Мы ❤️. @geteslint `–fix’s опция. Он ускоряет процесс интеграции такого крутого инструмента к существующим проектам. #software #devtools #javascript #eslint #superpowers pic.twitter.com/l0lrskszuj

Настройка Eslint.

yarn add eslint eslint-config-airbnb eslint-config-airbnb-base -D

Мы будем использовать Конфигурация стиля Airbnb который проходит через наш код и рассказывает нам, где бы мы ни пишали код нестандартным способом. Приведенная выше команда установит конфигурации в папке Node_Modules, но нам нужно будет сообщить ESLINT, чтобы использовать их. Сделайте файл под названием .eslintrc.json и заполните его:

// .eslintrc.json
{
  "extends": [
    "airbnb/legacy"
  ],
  "env": {
    "browser": true
  }
}

Стек Extens сообщает ESLINT для использования правил Airbnb на вершине собственных правил. Переменная ENV рассказывает ESLINT не кричать на нас, если мы используем переменные, такие как окно без инициализации этого. Для Lint через все наши файлы вы можете использовать подстановочный знак *.

node_modules/.bin/eslint *.js

Давайте запустим Eslint на наши файлы и посмотрите, что происходит.

Это все правила, определенные в руководстве в стиле AirbnB. Я оставлю это до вас, чтобы исправить ваши файлы. Всегда лучше иметь лговик с самого начала. Конечно, вы также можете отключить определенное правило. Например, если вы предпочитаете NO-SEMICOLON, или стиль двойной цитаты для одной цитаты, вы можете выключить их. Eslint даст вам эту гибкость.

Модули

Теперь давайте поговорим о модульности. При совершении крупномасштабных приложений нам нужно, чтобы наш код хорошо структурирован так, чтобы оно было легче масштабировать. Мы помещаем разделение проблем путем группировки кода в отдельные модули. JavaScript не поддерживает модули до тех пор, пока не пришел ES6. Но концепция модульности пришла задолго до ES6.

Commonjs.

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

// util.js
module.export = {
    noop: function(){},
    validateUrl: function(s){
      return s.matches(/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/)
    } 
};

// postController.js
var validateUrl = require('./util').validateUrl;
var handleSubmit = function handleSubmit(e) {
    if(!validateUrl(e.target.value)) {
       return;
    }
    submitUrl(e.target.value);
}

Если вы водители с узлом, вы можете найти этот кусок кода очень знакомого. Но есть нисходящие к этому стандарту, потому что это синхронно. Что означает, что если Validateurl не является Требуется , Handlesubmit в строке 3 постконтроллера выше не выполняется. Кодекс останавливает.

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

Определение асинхронного модуля (AMD)

Как и имя предлагает, он асинхронно загружает модули и Имеет еще несколько преимуществ над узорами Commonjs Отказ Вот как код выглядит как в и (добавил пару функций). Вы видите что-то знакомое?

define(['validateSpam', 'blockUser', function(validateSpam, blockUser){
  return {
    noop: function(){},
    validateUrl: function(s) {
      return s.matches(/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/)
    },
    validateSpammyComment: function validateSpammyComment(comment, userID) {
      if(validateSpam(comment)) {
        blockUser(userID);
        return false;
      }
      return true;
  }

Это похоже на то, как мы вкладываем зависимости в Angularjs на линии 1.

Модули ES6

Поскольку Комитет по TC39 увидела разработчики с использованием внешних библиотек, они четко почувствовали необходимость в JavaScript для поддержки модулей. Таким образом, они ввели их в ES6. Давайте использовать их!

Utils.js:

function noop(){};
function validateUrl(s) {
  return s.matches(/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/)
}
export {
  noop,
  validateUrl
}

PostController: js.

import { validateUrl } from './util';

var handleSubmit = function handleSubmit(e) {
    if(!validateUrl(e.target.value)) {
       return;
    }
    submitUrl(e.target.value);
}

Нет внешней библиотеки для звонка. Импорт/экспорт в родом поддерживается. Но есть еще версии браузеров которые не полностью поддерживают все особенности ES6 Отказ Это несоответствие поддержки браузера не остановило программистов от записи JavaScript следующего поколения. Инструменты, как Бабел доступны, что сканирует через JavaScript и транпили Это до браузера совместимого кода. И так же, как этот код поддерживает старые браузеры, такие как IE (о, то есть умирают уже!).

Babel и ES6

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

// /userFactory.js
let angular = window.angular;
let app = angular.module('RandomApp');

/**
 * A User factory which gets the user list
 * @param $http
 */

let userFactory = $http => {
  let UserF = {};
  UserF.getUsers = () => $http({
    method: 'GET',
    url: 'https://www.reqres.in/api/users'
  });
  return UserF;
};
app.factory('UserF', userFactory);

// /userController.js

let angular = window.angular;
let app = angular.module('RandomApp');

/**
 * Controls the user
 * @param $scope
 * @param UserF
 */
let userController = ($scope, UserF) => {
  $scope.users = [];
  UserF.getUsers().then(res => $scope.users = res.data.data);
};
userController.$inject = ['$scope', 'UserFactory'];

app.controller('userController', userController);

Проблема с этим кодом

Этот код не будет работать. Потому что пункт ключевое слово ES6 создает блок Scoped переменные, и мы не можем переопределить переменную в блоке, снова в его собственной области. Помните: мы все еще сидим на глобальном масштабе. Мы исправим это.

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

yarn add babel-cli babel-preset-env

Это добавит Babel-Cli и Babel-Preset-Env.

Babel плагины и пресеты

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

Вы можете выбрать, какие трансформации вы хотите. Группы плагинов называются пресетами. Babel-Preset-Env создает движущуюся цель для вашего бабела. Вы не указываете на фактическую версию JavaScript, но вы просите Babel отслеживать последнее N Версии всех браузеров.

Теперь сделайте файл конфигурации Babel: .babelrc и поместите его в корневую папку.

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": "last 2 versions"
      }
    }]
  ]
}

Теперь, если вы запустите следующую команду на вашем терминале, Babel сделает свою работу. Давай, попробуй:

node_modules/.bin/babel *.js

Изящные вещи, верно? Babel дал предварительный просмотр того, как будут выглядеть файлы, если бы преобразовать файлы для нас.

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

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

Давайте автоматизитируем аду из этого.

Объединение с помощью WebPack

Во-первых, переместите все файлы JS в папку. И давайте использовать стандартную Mnemonics и назвать папку построить Отказ Кроме того, давайте ревертируем наши файлы JavaScript, чтобы мы могли иметь все наши файлы, созданные в одном файле.

// /build/userController.js

/**
 * Controls the user
 * @param $scope
 * @param UserF
 */
let userController = ($scope, UserF) => {
    $scope.users = [];
    UserF.getUsers().then(res => $scope.users = res.data.data);
};
userController.$inject = ['$scope', 'userFactory'];

export default userController;

// /build/userFactory.js
/**
 * A User factory which gets the user list
 * @param $http
 */

let userFactory = $http => {
    let UserF = {};
    UserF.getUsers = () => $http({
        method: 'GET',
        url: 'https://www.reqres.in/api/users'
    });
    return UserF;
};
userFactory.$inject = ['$http'];

export default userFactory;

// /build/app.js
import angular from 'angular';

import userController from './userController';
import userFactory from './userFactory';

angular.module('RandomApp', [])
  .factory('userFactory', userFactory)
  .controller('userController', userController);

yarn add webpack webpack-dev-server babel-loader eslint-loader -D

И теперь создайте файл WebPack.config.js:

var path = require('path');

module.exports = {
    mode: 'development', // tells webpack that this is a development build. the 'production' switch will minify the code among other things
    devtool: 'cheap-eval-source-map', // generate source maps for better debugging and dont take much time.
    context: __dirname, // since this runs in a node environment, webpack will need the current directory name
    entry: './build/app.js', // take this file and add to the bundled file whatever this file imports
    output: {
        path: path.join(__dirname, 'dist'), // output this in a dist folder
        filename: 'bundle.js' // and name it bundle.js
    },
  // read medium post to know what's module and devServer because I dont have much room for comments
    module: {
      rules: [{
        enforce: 'pre',
        loader: 'eslint-loader',
        test: /\.js$/
      }, {
        loader: 'babel-loader',
        test: /\.js$/
      }]
    },
    devServer: {
        publicPath: '/dist/',
        filename: 'bundle.js',
        historyApiFallback: true,
        overlay: true
    }
};

Если вы сейчас выпустите WebPack, вы увидите все файлы, связанные в одном файле в папке Dist.

webpack

Блаженство.

Рассекать конфигурацию WebPack

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

Я прокомментировал большую часть вещей. Здесь я говорю о левом материале:

WebPack погрузчики (объект модуля)

Подумайте об этом как цепочкой загрузки кодов в трубопроводе. Последний в стеке (Babel-Loader в нашем случае) является первым, который использует WebPack для загрузки кусков кода. Мы просим WebPack пройти через наш код и сначала пересматривать его в ES5, используя Babel-Loader.

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

Но это не то, что делает наш конфиг. Мы добавили принуждение-предварительно на нашем погрузчике ESLINT, потому что мы хотим первым льва. Потому что вывод будет один файл. И этот файл будет в немно-читаемому формате человека, если мы используем Минификация и запутывание (что часто бывает в деле в производстве). Лотчик сойдет с ума, глядя на наш конец. Мы не хотим этого. Так что WebPack будет первым и Тогда транпиль.

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

HTML-погрузчик

В случае угловых, когда у нас есть шаблоны в директивах/компонентах, мы можем использовать HTML-погрузчик в WebPack.

templateUrl: './users/partial/user.tpl.html' // instead of this,
templateUrl: require('./users/partial/user.tpl.html')

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

WebPack Dev Server (Devserver)

WebPack Dev Server – это модуль, который поставляется отдельно от WebPack. Он вращает свой собственный сервер и наблюдает за файлами, которые мы меняемся. Если вы вносите какие-либо изменения, WDS снова будет включать его снова и обновить страницу. Если есть ошибки, он будет обновлять страницу на экране наложения (настроен на наверной клавиши) и показать вам ошибку прямо на браузере. И это супер быстро, потому что все это делает в памяти, а не на жестком хранении.

Конечно, чтобы получить его на работу, вам сначала необходимо иметь файл сборки базового сборки (то есть запустить WebPack хотя бы один раз, чтобы иметь файл сборки). Как только у вас есть, вы можете устрелить эту команду. Он запустит сервер и обслуживает статические файлы, откройте браузер для вас в порту 8080 и продолжайте наблюдать за изменениями.

webpack-dev-server --open

Вот и все!

Но это не конец этого, если вы думаете об этом. Есть еще много вещей, которые вы можете сделать. На работе мы используем Поток Для проверки статического типа, пока мы код. Статический тип проверки типа смотрит на ваш код и предупреждает вас, если вы, скажете, вызывая функции с неправильным типом аргументов. Вы можете интегрировать это, а также в WebPack.

Мы также используем Прекраснее Чтобы автоматически отформатировать наш код, так как мы вводите. Это просто делает код более читаемым.

Я собираюсь поставить это как плакат на моем столе в ближайшее время.

Заключение

Поздравляю! Ты сделал это!

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

Я звоню в реакцию на данный момент, и скоро я скоро смогу придумать другую статью, если вам понравился этот. Может быть включить Разумность , Graphql или Redux. . Если вам понравилась эта статья или ненавидела его или иметь некоторые отзывы, пожалуйста, скажите мне.

Я живу в Twitter, как @Aminspeaks и везде еще как @ BinaryBaba.

Ура и божем.

Оригинал: “https://www.freecodecamp.org/news/the-brain-fatigued-javascripters-guide-to-modern-frontend-tooling-in-2018-9818a04e9ec5/”