Построить многоразовую библиотеку JavaScript

Автор оригинала: Chimeremeze Ukah.

Почему вам нужно создать пользовательскую библиотеку

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

Когда вы работаете над несколькими проектами, вы начинаете видеть шаблоны в коде, который вы пишете, функции, которые вы часто используете, те, которые вы редко используете, а те, которые вы никогда не используете. Такие вещи, такие как AJAX-запросы и манипулирование элементами DOM, кажется, поднимается высоким в этом списке. С течением времени вы устали от реализации ту же функциональности с нуля или использовать библиотеку, которая существенно влияет на время загрузки вашего веб-приложения. То есть когда вы должны рассмотреть возможность создания пользовательской библиотеки для этих конкретных функций.

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

Логика приложения

Мы собираемся построить библиотеку JavaScript, которая имеет аналогичные функции как jQuery. Он манипулирует выбранный элемент DOM при создании HTML-элементов или редактирования ранее существующих.

Какая конечная цель – уметь выбрать элемент DOM и изменять контент с использованием формата:

ghost('div').html('
I am a paragraph
');

Настройка среды разработки

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

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

Мы можем начать наш проект, создав каталог проекта под названием Библиотека , CD в него и делай:

# instantiate an npm project
$ npm init

И заполните ответы на вопросы, представленные вам.

Создание файлов и папок, чтобы соответствовать нашему файлу проекта и структуре папки:

library
    |- .babelrc
    |- package.json
    |- webpack.config.js
    |- src
        |- App.es6

Установите необходимые зависимости, используя Пряжа или NPM:

npm i webpack webpack-dev-server babel-core babel-loader babel-preset-es2015 -D

Также установите наш модуль DOTENV, чтобы мы могли добавить наши конфигурации из внешнего файла:

$ npm i dotenv -D

Создать .env Файл в корне нашей папки проекта. Эти конфигурации будут использоваться в нашем файле конфигурации WebPack, используя Process.env объект

#Library Name
NAME=ghost
# production/development
NODE_ENV=production
# window/umd
TARGET=window

Далее нам нужно добавить конфигурации нашему webpack.config.js файл. Я собираюсь добавить простую конфигурацию, которая просто включает в себя запись, Бабел Погрузчик для нашего ES6 код и выходные файлы и путь. Кроме того, мы можем указать наш выход как библиотеку и цель для нашей библиотеки (в нашем случае это браузер).

Наша конфигурация WebPack может выглядеть так:

const path = require('path');
const config = require('./package.json');

const webpack = require('webpack');
require('dotenv').config();

const PROD = process.env.NODE_ENV === 'production';

let plugins = [];

PROD ? [
    plugins.push(new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false }
    }))
  ] : '';

module.exports = {
  entry: path.resolve(__dirname, config.main),
  devtool: 'source-map',
  output: {
    library: process.env.NAME,
    libraryTarget: process.env.TARGET,
    path: __dirname,
    filename: (PROD) ? 'build/ghost.min.js' : 'build/ghost.js'
  },
  module: {
    loaders: [
      {test: /\.es6?$/, exclude: /node_modules/, loader: 'babel-loader'}
    ]
  },
  plugins: plugins
};

Добавьте наши пресеты Конфигурацию для Babel в .babelrc Файл содержит:

{
  "presets": ["es2015"]
}

Примечание : Убедитесь, что ваш Главная Ключевое значение в вашем Package.json Файл содержит путь к вашему входу, в этом случае он должен содержать src/app.9s6 Отказ

Создание нашей библиотеки

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

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

"use strict";

class ghost {
  constructor(selector) {
    this.selector = document.querySelector(selector);
  }
}

Далее мы хотим иметь возможность получить или редактировать содержимое HTML в элементе DOM. Мы можем добавить HTML () Метод нашего класса:

html (content = null) {
  if (content !== null) {
    this.selector.innerHTML = content;
  }
  return this.selector.innerHTML;
}

В способе выше, мы используем значение аргумента ES6 по умолчанию для установки контента на NULL. Мы проверяем, если Содержание Аргумент не является нулевым и изменяет значение нашего элемента DOM на основе этого и вернуть значение.

Довольно просто, вы можете настроить и добавлять дополнительные функции в эту библиотеку JavaScript, поскольку вы видите подходящие.

Теперь мы можем экспортировать анонимную функцию, которая возвращает экземпляр этого класса, используя ES5 Module.exports :

module.exports = (selector) => {
  return new ghost (selector);
};

Тестирование с Mocha, Chai, & jsdom

Как и каждый другой код, который вы пишете, у вас должен быть сопровождающий тест, который его проверяет. Чтобы проверить нашу библиотеку, мы собираемся использовать Mocha, Chai и JSDOD, чтобы превратить нашу тестовую среду в издевательства без головы в браузере.

Во-первых, нам нужно установить наши зависимости:

$ npm i mocha chai jsdom jsdom-global -D

Далее мы можем создать нашу тестовую папку в корневом каталоге проекта и создать тестовый файл.

# create test directory
$ mkdir test
$ cd test

# create test file and mocha opts file
$ touch index.test.js mocha.opts

Добавить JSDOD Global как требование для нашего теста Mocha, а также добавить Babel-Core Как компилятор для наших файлов JS в Mocha.opts файл:

--compilers js:babel-core/register
-r jsdom-global/register

Время написать наши тесты. Импорт необходимых модулей в index.test.js :

// import chai as our assertion library
import chai from 'chai';

//require jsdom-global and run
require('jsdom-global')()

// import our library
import ghost from '../src/App.es6';

// initialize chai should
chai.should();

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

//....
// create mock html tag
document.body.innerHTML = "
Sample text in div
";

Теперь мы можем описать нашу библиотеку:

describe('#Ghost Library Test', function () {
  //....
  // create other descriptions and run assertions in here
});

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

describe('#Element Selector', function () {
  it('should be an object', function () {
    ghost('div').selector.should.be.an('object');
  });
});

Мы можем проверить наше HTML Метод в нашей библиотеке тоже:

//....
// check if it returns a string
describe('#DivContent', function () {
  it('should be a string', function () {
    ghost('div').html().should.be.a('string');
  });

  // test if it returns the actual text within div in mock html
  it('should equal Sample text in div', function () {
    ghost('div').html().should.equal('Sample text in div');
  });

  // see if it changes the value
  it('should equal paragraph text', function () {
    ghost('div').html('
changed value
').should.equal('
changed value
');
  });

  // see if it clears the text content
  it('should equals empty text', function () {
    ghost('div').html('').should.equal('');
  });
});

Письменный тест на каждую линейку кода целесообразно, таким образом, у вас есть в виду гарантия качества кода. Вы можете использовать библиотеки, такие как Стамбул Для покрытия кода, убедившись, что каждая строка кода, которую вы записываете, по крайней мере один раз во время теста. Для кодов ES6 вы можете использовать Испарта Чтобы проверить наличие охвата в исходном коде ES6, прежде чем он будет транспильден.

Непрерывная интеграция

Если вы используете системы управления версиями, такие как GIT, вы можете настроить системы, которые запускают тестовые сборки каждый раз, когда вы совершаете, и нажмите на удаленный репозиторий. Если вы работаете с группой других разработчиков, Непрерывная интеграция Это хороший способ убедиться, что ваши тесты проходят и они содержат хорошее качество кода, которое не нарушит сборку, прежде чем пройти с любым запросом на тягу. Вы можете использовать инструменты, такие как TRAVIS-CI для этого.

Заключение

Вы можете построить свою библиотеку, используя:

$ webpack && NODE_ENV=development webpack

Вышеуказанный код создает как версию производства, так и разработки нашего кода в ES6. Запуск Это может быть немного утомительным делать каждый раз, когда мы хотим создать сборку. Вы можете добавить, что как "построить" Сценарий в вашем Package.json Файл, а затем запустите это вместо этого:

$ npm run build

Для сервера разработки с помощью WebPack-Dev-Server вы можете создать HTML-страницу в корне нашего каталога проекта, который имеет содержимое:

  
    
    
  
  
    
Call Me
    
    
  

И запустить WebPack-Dev-Server с заменой горячей модуля:

$ webpack-dev-server --inline --hot

Вы также можете добавить, что как «Дев» Сценарий в вашем Package.json Сервер для разработки файла и запуска как:

$ npm run dev

Это оно! Хорошо пойти!

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