Настройте веб-пакет для использования настраиваемой функции require - PullRequest
0 голосов
/ 04 июля 2019

Есть ли способ использовать пользовательские функции в веб-пакете?Так что вместо стандартных способов требовать модуль

const styles = require("styles.css");
import styles from "styles.css";

я мог бы написать что-то вроде этого

const styles = loadStyles("styles.css");

, где loadStyles - несуществующая функция, но веб-пакет обработает еетаким же образом, как require.

Это было бы очень удобно для запуска модульных тестов в узле.По очевидным причинам узел не может загрузить CSS или любой другой файл ресурсов с require, так как require только для модулей JavaScript.Но довольно просто смоделировать пользовательскую глобальную функцию только для модульных тестов:

function loadStyles() { return "fake styles"; }

Короче говоря, я хочу сказать вебпаку, что loadStyles (или любая другая функция) - это новая require.

1 Ответ

1 голос
/ 04 июля 2019

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

Вы можете использовать Babel, который позволяет пропустить такой импорт. Для React существует даже целый пакет для этого: Babel-Plugin-React-CSS-Modules . Этот пакет позволяет включать и разрешать имена стилей, но хранить таблицу стилей отдельно от сценария при тестировании / рендеринге на стороне сервера.

Если вы используете Jest, в нем есть отдельный раздел Обработка статических активов .


В общем, это зависит от того, чего вы хотите достичь. Многие фреймворки - или, по крайней мере, конфигурации webpack / babel - зависят от импортированных имен стилей (часто хэшируются или что-то в этом роде). Это означает, что вам нужны разрешенные имена классов ваших таблиц стилей внутри ваших скриптов. В противном случае вы не сможете запускать условия и другие алгоритмы для них.

Babel и другие приложения / библиотеки позволяют вам именно это. Они разрешают ваши scss или css таблицы стилей с помощью import или require и смотрят, какие классы находятся внутри таблицы стилей, чтобы отобразить их в объект внутри javascript. После этого они не обращают внимания на таблицы стилей. Это делает его идеальным для тестов и рендеринга на стороне сервера, поскольку классы разрешаются, но обрабатываются другим загрузчиком веб-пакетов.

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

Если вы действительно хотите сделать много необычных изменений в ваших таблицах стилей, придерживайтесь require, напишите свой собственный загрузчик для него и активируйте / деактивируйте загрузчик на основе параметра ENV (например, production | test | development) .

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