BugReport (Webpack-сборка)

Допустим, имеется JS-пакет https://github.com/BorisPlus/BugReport. Задача упаковать его в модуль с использованием Webpack.

Оффтоп: мдя, почему не работает <a href="..." target="_blank">...</a> или [link](url){:target="_blank"}.

Описание процесса сборки модуля с использованием Webpack

Предварительно

В терминале (возможно Вам понадобятся права root, прибегните к sudo или su):

apt-get install -y nodejs #nodejs -v
cd ./project
npm install webpack
npm install webpack-cli

Переработка (портирование) проекта

Можно ничего не делать и запустить сборку исходного bug_report.js:

module.exports = {
    entry: './src/bug_report',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bug_report.bundle.js'
    },
    mode: 'production',
};

Понятно, что все заработает для базового варианта.

Но если необходимо привязать объект BugReport к дополнительной "форме", то:

либо дописать соответствующи код в конец bug_report.js

let example_bug_report = new BugReport(
    'example',
    'Патлумачце дадаткова і пакажыце кантактныя дадзеныя, калі хочаце.'
);
let my_bug_report = new BugReport(
    'my',
    'Leave a comment and contact to contact you if you want.'
);

и запустить выше указанную пересборку.

либо исходный код (портировать) немного переработать.

Почему нужно переработать. Логично держать "ядро" библиотеки отдельно от места его использования\вызова. Нужно, значит, создать отдельный файл my.bug_report.js с указанными в прошлом пункте объявлениями объектов. А чтоб этот файл "увидел" файл "ядра", необходимо применить import и export.

Перво наперво что нужно сделать, так это объявить, что класс BugReport должен экспортироваться. Добавим прямо в конец bug_report.js:

export {BugReport};

Теперь в my.bug_report.js импортируем:

import { BugReport } from './bug_report';

Это все.

Сборка проекта

При отладке мне нравится использовать режим отслеживания изменений и задержку на пересборку.

Для этого есть --watch ключ:

npx webpack --config webpack.config.js --watch

или если в webpack.config.json:

module.exports = {
    ...
    watch: true,
    watchOptions: {
        aggregateTimeout: 300
    }
    ...
};

Запуск сборки

cd project/
npm run build

а в случае необходимости отладочной автопересборки проекта

cd project/
npm run build:dev

или

cd project/
npx webpack --config webpack.config.js --watch

Проверка работоспособности

Откройте проектный пример examples.html.

Поведение идентично изначальному, см. GIF-анимацию:

Coderfriendly-подход

Если в конфиг webpack.config.json в позицию output добавить:

module.exports = {
    ...
    output: {
        ...
        libraryTarget: 'var',
        library: 'PackedBugReport'
        ...
    },
    mode: 'production',
};

то сторонним разработчикам совсем не обязательно пересобирать проект и "зашивать" (как это было сделано с my.bug_report.js) свою реализацию в собираемый "модуль".

Достаточно сделать в my.bug_report.js проброс экспорта:

export { BugReport };

и стороннему разработчику станет возможным делать привязку к своим объектам BugReport (подгружая класс PackedBugReport.BugReport внутри HTML кода или же в отдельном своем файле):

let module_usage_bug_report = new PackedBugReport.BugReport('module_usage');

Это продемонстрировано в "Примере №4" файла примеров, где первые три примера подгружаются из webpack-сборки, а последний - с использованием стороннего (с точки зрения данной webpack-сборки) файла module_usage.bug_report.js.

GIF-анимация "Примера №4":

Вывод

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

Факультатив

npm install webpack-dev-server

Добавить в package.json

    "scripts": {
        ...
        "start:dev": "webpack-dev-server",
        ...
      }
    ...

Запускать как

npm run start:dev

лог для примера

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wdm｣: wait until bundle finished: //examples/examples.html
ℹ ｢wdm｣: Hash: 6ecb8aca659466d76bc1
Version: webpack 4.23.1
Time: 1261ms
Built at: 2018-10-27 00:39:46
               Asset     Size  Chunks             Chunk Names
bug_report.bundle.js  143 KiB       0  [emitted]  main
Entrypoint main = bug_report.bundle.js
 [2] multi (webpack)-dev-server/client?http://localhost:8080 ./src/my.bug_report 40 bytes {0} [built]
 [3] (webpack)-dev-server/client?http://localhost:8080 7.78 KiB {0} [built]
 [4] ./node_modules/url/url.js 22.8 KiB {0} [built]
 [5] ./node_modules/node-libs-browser/node_modules/punycode/punycode.js 14.3 KiB {0} [built]
 [7] ./node_modules/url/util.js 314 bytes {0} [built]
 [8] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
[11] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[12] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
[13] ./node_modules/loglevel/lib/loglevel.js 7.68 KiB {0} [built]
[14] (webpack)-dev-server/client/socket.js 1.05 KiB {0} [built]
[15] ./node_modules/sockjs-client/dist/sockjs.js 180 KiB {0} [built]
[16] (webpack)-dev-server/client/overlay.js 3.58 KiB {0} [built]
[21] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {0} [built]
[23] (webpack)/hot/emitter.js 75 bytes {0} [built]
[25] ./src/my.bug_report.js + 1 modules 3.63 KiB {0} [built]
     | ./src/my.bug_report.js 442 bytes [built]
     | ./src/bug_report.js 3.2 KiB [built]
    + 11 hidden modules
ℹ ｢wdm｣: Compiled successfully.

Авторы

BorisPlus - https://github.com/BorisPlus/otus_webpython_018

Лицензия

Свободно

Дополнительные сведения

Проект в рамках домашнего задания курса "Web-разработчик на Python" на https://otus.ru/learning

artdokxxx/otus_webpython_018