Встряхивая дерево модули ES6 в WebPack 2

Автор оригинала: FreeCodeCamp Community Member.

Джейк Вислер

WebPack 2 был только что выпущен из бета на прошлой неделе. Он приносит с собой различные ожидаемые функции, в том числе нативную поддержку модулей ES6.

Вместо использования VAR («Модуль») Синтаксис, WebPack 2 поддерживает ES6 Импорт и Экспорт Отказ Это открывает дверь для оптимизаций кода, как дрожание дерева Отказ

Что такое встряхивание деревьев?

Популяризирован богатыми Харрисом Rollup.js Модуль Bundler, дрожание дерева Является ли способность включать только код в вашем комплекте, который является использовал.

Когда я впервые играл с рулоном, я был поражен тем, насколько хорошо он работал с модулями ES6. Опыт развития только что чувствовал … Правильно. Я мог бы создать отдельные модули, написанные в «будущем JavaScript», затем включают их в любом месте в моем коде. Любой код, который идет неиспользованным, не делает его в мою пакет. Гениус!

Какую проблему это решает?

Если вы пишете JavaScript в 2017 году и понять (См.: Усталость JavaScript ) Различные инструменты вокруг, ваш опыт развития, вероятно, чувствует себя довольно жидкости. Это важно, но что также важно, это Пользовательский опыт Отказ Многие из этих современных инструментов заканчиваются вздутыми веб-приложениями с массивными файлами JavaScript, что приведет к более медленной производительности.

То, что я люблю о скат, это то, что он берет на себя удар по этому вопросу и приносит решение на передний план сообщества JavaScript. Теперь большие имена, такие как WebPack, пытаются итереть на нем.

Встряхивание деревьев не может быть «Решение для окончания всех решений» Но это важная часть в большем пироге.

Простой пример

Прежде чем начать, я хочу предоставить вам тривиальный пример встряхивания деревьев. Ваше приложение состоит из 2 файлов, index.js и module.js Отказ

Внутри module.js Вы экспортируете 2 с именованными функциями arrow:

// module.js 

export const sayHello = name => `Hello ${name}!`; 

export const sayBye = name => `Bye ${name}!`

Только Сайхелло импортируется в index.js файл:

// index.js 

import { sayHello } from './module'; 

sayHello('World');

Сейчас экспортируется, но никогда не импортирован. В любом месте. Поэтому из-за встряхивания дерева он не будет включен в ваш пучок:

// bundle.js 

const sayHello = name => `Hello ${name}!`; 

sayHello('World');

В зависимости от используемого Bundler выходной файл выше может выглядеть другим. Это просто упрощенная версия, но вы получаете идею.

Недавно я прочитал статью, написанную Роман Лютиков И он сделал отличную аналогию, чтобы визуализировать концепцию встряхивания деревьев:

Встряхивание дерева в WebPack 2

К сожалению для тех из нас, используя WebPack, встряхивание деревьев – это «за коммутатором», если вы будете. В отличие от рулона, некоторая конфигурация должна быть сделана, прежде чем вы сможете получить функциональность, которую вы ищете. Часть «за выключателем» может запутать некоторые люди. Я объясню.

Шаг 1: Настройка проекта

Я собираюсь предположить, что вы понимаете основы WebPack и можете найти свой путь вокруг базового файла конфигурации WebPack.

Давайте начнем с создания нового каталога:

mkdir webpack-tree-shaking && cd webpack-tree-shaking

Однажды внутри, давайте инициализируем новую NPM проект:

npm init -y

-Я Опция генерирует Package.json быстро, не требуя, чтобы вы отвечали на кучу вопросов.

Далее давайте установим несколько проектных зависимостей:

npm i --save-dev webpack@beta html-webpack-plugin

Приведенная выше команда установит новейшую бета-версию WebPack 2 локально в вашем проекте, а также полезный плагин с именем html-webpack-plugin Отказ Последнее не нужно для цели этого прохождения, но сделает вещи немного быстрее.

Примечание : Команда NPM i --save-dev webpack @ beta по-прежнему рекомендуется командой WebPack на момент написания. WebPack @ Beta в конечном итоге будет постепенным в пользу WebPack Последняя команда. Проверьте Как загрузить? Раздел Последний релиз WebPack Post Больше подробностей.

Откройте Package.json и убедитесь, что они были установлены как DevDependonds Отказ

Шаг 2: Создание файлов JS

Для того, чтобы увидеть встряхивание деревьев в действии, вам нужно иметь какой-то JavaScript для игры с. В корне вашего проекта создайте SRC Папка с 2 файлами внутри:

mkdir src && cd src 

touch index.js 

touch module.js

Примечание: коснуться Команда создает новый файл через терминал.

Скопируйте код ниже в правильные файлы:

// module.js 

export const sayHello = name => `Hello ${name}!`; 

export const sayBye = name => `Bye ${name}!`;

// index.js 

import { sayHello } from './module'; 

const element = document.createElement('h1'); 

element.innerHTML = sayHello('World'); 

document.body.appendChild(element);

Если вы получили это далеко, ваша структура папки должна выглядеть так:

/ 
| - node_modules/ 
| - src/ 
|    | - index.js 
|    | - module.js 
| - package.json

Шаг 3: Уэбпак из CLI

Поскольку у вас нет файла конфигурации, созданного для вашего проекта, единственный способ получить WebPack, чтобы выполнить любую работу в данный момент – через WebPack CLI. Давайте выполним быстрый тест.

В вашем терминале запустите следующую команду в корне вашего проекта:

node_modules/.bin/webpack

После выполнения этой команды вы должны увидеть так:

No configuration file found and no output filename configured via CLI option. A configuration file could be named 'webpack.config.js' in the current directory. Use --help to display the CLI options.

Команда ничего не делает, и WebPack CLI подтверждает это. Вы не дали WebPack любой информации о каких файлах вы хотите запустить. Вы можете предоставить эту информацию через командную строку или файл конфигурации. Давайте выберем первое просто, чтобы проверить, что все работает:

node_modules/.bin/webpack src/index.js dist/bundle.js

То, что вы сделали сейчас, проходит WebPack a Вход Файл и Выход Файл через CLI. Эта информация рассказывает WebPack: «Перейти к SRC/index.js и сочините весь необходимый код в dist/bundle.js ». И это только что. Вы заметите, что у вас сейчас есть Dist каталог, содержащий bundle.js Отказ

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

Шаг 4: Создайте файл конфигурации WebPack

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

В корне вашего проекта создайте webpack.config.js файл:

touch webpack.config.js

Этот файл может быть таким же сложным, как вы делаете его. Мы будем держать его светом ради этого поста:

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: 'dist'
  },
  plugins: [
    new HtmlWebpackPlugin({ title: 'Tree-shaking' })
  ]
}

Этот файл предоставляет веб-пакет с одной и той же информацией, которую вы дали на CLI ранее. Вы определены index.js Как ваш Вход Файл и bundle.js Как ваш Выход файл. Вы также добавили свой html-webpack-plugin который будет генерировать файл HTML в вашем Dist каталог. Удобный.

Продолжайте и проверьте это, чтобы убедиться, что он все еще работает. Удалить свой Dist каталог, а в типе командной строки:

webpack

Если все прошло гладко, вы можете открыть dist/index.html И посмотрите “Hello World!”.

Примечание: Использование файла конфигурации дает нам удобство ввода WebPack вместо node_modules/.bin/webpack Отказ Маленькие победы.

Шаг 5: Бабел

Ранее я упоминал, что WebPack 2 приносит нативную поддержку модулей ES6. Это все правда, но не изменяет тот факт, что ES6 не полностью поддерживается во всех браузерах. Из-за этого вам нужно трансформировать Ваш код ES6 в легко приемлемый JavaScript, используя инструмент, похожий на Бабел Отказ В сочетании с WebPack Babel дает нам возможность написать свой «будущий JavaScript», не беспокоясь о последствиях неподдерживаемых браузеров.

Давайте пойдем вперед и устанавливаем Babel в вашем проекте:

npm i --save-dev babel-core babel-loader babel-preset-es2015

Примите к сведению Babel-Preset-ES2015 упаковка. Этот маленький парень – причина, по которой я сел, чтобы написать все это.

Шаг 6: Babel-Loader

WebPack можно настроить для преобразования определенных файлов в модули через Погрузчики Отказ Как только они будут преобразованы, они добавляются к графику зависимости. WebPack использует график для разрешения зависимостей и включает в себя только то, что необходимо в финальном расслоении. Это основа для того, как работает WebPack.

Теперь вы можете настроить WebPack для использования Babel-Loader преобразовать все ваши .js Файлы:

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js', path: 'dist' },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: { 
          presets: [ 
            'es2015' 
          ] 
        }
      }
    ]
  },
  plugins: [ 
    new HtmlWebpackPlugin({ title: 'Tree-shaking' }) 
  ]
};

модуль Собственность предоставляет набор инструкций для WebPack. Он говорит: «Возьмите любые файлы, заканчивающиеся в .js и преобразуйте их, используя Babel-loader , но не преобразуйте какие-либо файлы внутри Node_Modules !»

Мы также передаем Babel-Preset-ES2015 Пакет в качестве опции для Babel-Loader Отказ Это просто рассказывает Babel-Loader Как преобразовать JavaScript.

Беги WebPack снова, чтобы убедиться, что все хорошо. Да? Большой! То, что мы сделали, связано с вашими файлами JavaScript при компиляции их до JavaScript, которые легко поддерживаются через браузеры.

Основная проблема

Пакет Babel-Preset-ES2015 Содержит другой пакет с именем Babel-Plugin-Transform-ES2015-Modules-Commonjs это превращает все ваши модули ES6 в Commonjs модули. Это не идеально, и вот почему.

Bundlers JavaScript, такие как WebPack и Rollup, могут выполнять только встряхивание деревьев на модулях, которые имеют статическую структуру. Если модуль статичен, то Bundler может определить его структуру в состоянии сборки, безопасно удаляющий код, который нигде не импортируется.

Commonjs Модули не имеют статической структуры. Из-за этого WebPack не сможет дерево-встряхивать неиспользуемый код из окончательного расслоения. К счастью, Бабел облегчает эту проблему, предоставляя разработчикам вариант, который вы можете перейти к вашему пресеты массив вместе с Babel-Preset-ES2015 :

options: { presets: [ [ 'es2015', { modules: false } ] ] }

По словам Бабела Документация :

«Модули – включить преобразование синтаксиса модуля ES6 в другой тип модуля (включен по умолчанию на« Commonjs »). Может быть false не преобразовывать модули, или один из [" AMD "," UMD " , "Systemjs", "Commonjs"] “ Отказ

Сдвиньте этот дополнительный код кода в вашу конфигурацию, и вы будете готовить с арахисовым маслом.

Заключительное состояние webpack.config.js Похоже, это выглядит:

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js', path: 'dist' },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: { 
          presets: [ 
            [ 'es2015', { modules: false } ] 
          ] 
        }
      }
    ]
  },
  plugins: [ new HtmlWebpackPlugin({ title: 'Tree-shaking' }) ]
};

Гранд Финал

Беги WebPack снова и поп открыть свой bundle.js файл. Вы не заметите никаких различий. Прежде чем сходить с ума, знай это! Ничего страшного. Мы запускаем WebPack в режиме разработки в течение всего времени. WebPack знает, что у вас неиспользованный экспорт в вашем коде. Хотя он включен в финальный пакет, Сейчас никогда не сделаю это до производства.

Если ты все еще не веришь мне, беги WebPack -P в вашем терминале. -P Опция обозначает Производство Отказ WebPack выполнит несколько дополнительных оптимизаций производительности, включая замириемость, удаление любого неиспользованного кода по пути.

Откройте bundle.js Отказ Так как он министерство, продолжайте искать Привет Отказ Это Должен будь там. Поиск Пока Отказ Это не должен Отказ

Вуаля! Теперь у вас есть рабочая реализация встряхивания дерева в WebPack 2!

Для любопытных, я медленно итерации по поводу моей собственной конфигурации WebPack в Github Repo:

Джейк-Wies/WebPack-Hot Plate WebPack-Hot Platl – веб-патрубка для личных проектов github.com.

Это не значит быть слишком многослойным и раздутым. Он сосредоточен на том, чтобы быть доступным ботингом с воротами на каждом ходу. Если вы заинтересованы, проверьте это!

Если у вас есть какие-либо вопросы, не стесняйтесь протянуться от Twitter !