Как сделать основанный на классе пользовательский элемент без побочных эффектов, чтобы webpack связывал только явно импортированные компоненты - PullRequest
Новая
       68

Как сделать основанный на классе пользовательский элемент без побочных эффектов, чтобы webpack связывал только явно импортированные компоненты

0 голосов
/ 28 августа 2018

У меня есть набор пользовательских элементов spec v1, для упаковки которых я использую webpack 4 (и для загрузки babel-загрузчик).

Все компоненты выглядят примерно так: 

export class CompDiv extends HTMLDivElement {
  constructor(...args) {
    const self = super(...args);
    self.property = null;
    return self;
  }
  connectedCallback() {
    console.log('connected CompDiv');
  }
}

customElements.define('comp-div', CompDiv, { extends: 'div' });

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

Однако регистрация компонента происходит в самом модуле: 

customElements.define('comp-div', CompDiv, { extends: 'div' });

Насколько я понимаю, является побочным эффектом.

Теперь у меня есть index.js, который в основном выглядит так: 

export { CompDiv } from './components/comp-div/comp-div';
...
export { CompBtn } from './components/comp-btn/comp-btn';

Моя точка входа в веб-пакет выглядит так: 

import 'document-register-element';
import 'babel-polyfill';
import { CompDiv } from './index';

Теперь, когда я делаю это, CompBtn (и все другие экспорты в index.js) становятся частью пакета, даже если он не импортируется в мою точку входа в веб-пакет.

Каков был бы рекомендуемый способ разрешения деревьев в веб-пакете с этими веб-компонентами?

1 Ответ

0 голосов
/ 12 июня 2019

Из руководства по веб-упаковке - Отметить файл как свободный от побочных эффектов :

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

Итак, установка "sideEffects": false в package.json говорит веб-пакету, что ваши модули не имеют побочных эффектов. Так что это может сократить неиспользованный экспорт (в вашем случае, неиспользованный реэкспорт). Это обычно используется авторами библиотеки .

Но это только одна сторона уравнения.

Из документов конфигурации веб-пакета - optimization.sideEffects:

Указывает веб-пакету распознавать флаг sideEffects в package.json или правила для пропуска модулей, которые не содержат побочных эффектов, если экспорт не используется.

Таким образом, чтобы использовать ранее упомянутый параметр, потребителю библиотеки потребуется установить для параметра optimization.sideEffects значение true в своем файле конфигурации веб-пакета: 

// webpack.config.js
module.exports = {
  ...
  optimization: {
    sideEffects: true
  }
  ...
}

Обратите внимание, что в режиме production эта опция включена по умолчанию. Так что вам нужно будет установить его только для режима development.

N.B. : В этом случае вы являетесь автором и потребителем ваших модулей.

Наконец, давайте посмотрим на вашу точку входа в веб-пакет: 

// webpack entrypoint
import 'document-register-element';
import 'babel-polyfill';
import { CompDiv } from './index';

Если вы не используете импортированный CompDiv позже в этом файле, веб-пакет его удалит - при условии, что вы установили "sideEffects": false в package.json и optimization.sideEffects в true в конфигурации веб-пакета.

Но, например, даже если вы только импортировали 'babel-polyfill' и не будете явно использовать что-либо из этого позже в этом файле, веб-пакет не удалит его, потому что package.json для babel-polyfill библиотека не содержит "sideEffects": false.

Надеюсь, это прояснит ситуацию.

...