Блог

Некоторое время назад я создал небольшой фреймворк JS / CSS, включающий пользовательские элементы. Теперь я хочу улучшить свой рабочий процесс (компиляция, объединение, минимизация …) с помощью npm и node.js , так что я очень новичок в этом деле.

Каждый компонент (модуль) был записан в отдельный .js файл. Могут быть зависимости между одним или несколькими компонентами, например:

Файл: src/modules/component_1.js

 class Component_1{
    // Code ...
}
export{
    Component_1
}
 

Файл: src/modules/component_2.js

 import {Component_1} from './component_1.js';
class Component_2{
    // Code ...
}
export{
    Component_2
}
 

Мне нужна такая структура, как эта:

 my-project/
|-- js/
|   |-- components.js 
|   |-- components.min.js
|-- src/
|   |-- modules/
|       |-- component_1.js
|       |-- component_2.js
|       |-- ...
|       |-- component_30.js
 

• Я хочу, чтобы мои .js файлы src/modules/ оставались нетронутыми. Таким образом, я могу добавлять новые функции и так далее, Используя эти файлы, и после этого я могу создать новый производственный .js файл js/components.min.js .
• Я хочу реализовать это как скрипт, чтобы я мог вызвать его, например, через консоль npm ruin build-js .
• Шаг 1. Объединение всех .js модулей в один файл. Итак, для этого все import инструкции из моих модулей должны быть удалены.
• Шаг 2: Компиляция моих модулей ES6 в CJS (?).
• Шаг 3. Сохраните результат как js/components.js и js/components.min.js (уменьшенный).

Я сделал аналогичную вещь с моим sass (компиляция .scss в .css , .css.map , .min.css , .css.min.map использование clean-css ). Но кажется, что делать то же самое с моим JS довольно сложно для новичка в node / npm, такого как я (использование автономного uglify не сработало).

Итак, как я могу это сделать? Существует множество плагинов и пакетов, таких как webpack, rollup, uglify, grunt, gulp, yeoman и так далее. Но я определенно не знаю, какие пакеты мне точно нужны.

РЕДАКТИРОВАТЬ: после еще нескольких часов попыток решения с помощью развертывания и webpack, кто-нибудь может привести пример, как это сделать? Я думаю, что не может быть так сложно объединить все файлы js из каталога и минимизировать результат.

Таким образом, вы можете использовать webpack для создания пакетов js, то есть вы можете объединить свои файлы js в один пакет. В Webpack также есть функции, которые сокращают ваш код в рабочей среде. Вы можете узнать больше о webpack в его документах: https://webpack.js.org/concepts / Для специальных файлов, таких как файлы sass, вы можете использовать загрузчики, такие как sass-loader с загрузчиком стилей и загрузчиком файлов.