Если вы разрабатываете на современном javascript, то почти любой ваш модуль содержит простыню таких строк:
import React from 'react'
import $ from 'jquery'
...
Как оказалось, большинство этих строк можно не писать, доверив их генерацию автоматике. И помогает в этом новомодный webpack, в котором, как оказывается, полно приятных сюрпризов. Кроме всем известных require и import для любых файлов и уже описанного на хабре «hot module replacement», webpack может проанализировать ваш исходный код и автоматически включить нужные модули на основании используемых литералов. Под катом — краткое описание как работает эта магия.
За анализ ваших исходников и автоматическое создание import директив отвечает специальный плагин ProviderPlugin, который встроен в webpack и не требует установки. Чтобы магия сработала, необходимо указать плагин в конфигурационном файле wbpack и снабдить его списком идентификаторов и модулей. Как известно, webpack использует парсер esprima, и поэтому имеет весьмы точное представление о структуре вашего кода. Встретив в исходнике указанный индентификатор, webpack сгенерирует код загрузки указанного модуля так же, как это он это делает для import или require. Фрагмент конфигурационного файла:
module.exports = {
plugins: [
new webpack.ProvidePlugin({
'React': 'react',
...
При использовании плагина с конфигурацией из примера, webpack будет искать использование индентификатора React. Он проигнорирует такую строку:
const foo = "React";
и даже такую:
bar.React = true;
Зато встретив вот такую, сразу поймет что в этом модуле используется ReactJS и снабдит фрагмент bundle кодом загрузки соответствующего модуля:
React.createClass(…)
И конечно же никто не ограничивает вас только ReactJS. Используйте этот способ для популярных библиотек и часто использумых модулей вашего собственного проекта, чтобы сделать код лакониченее и проще:
new webpack.ProvidePlugin({
'$': 'jquery',
'_': 'lodash',
'ReactDOM': 'react-dom',
'cssModule': 'react-css-modules',
'Promise': 'bluebird'
})
P.S.
Если вы, как и я, хотите использовать ES6 import вместо старенького require, то делается это путем указания babel как loader'а для webpack. И не забывайте про .babelrc и presets — в последней версии babel разработчики подготовили сюрприз для новичков, без указания presets babel теперь не делает ничего:
module.exports = {
module: {
loaders: [{
test: /.js$/,
loaders: ['babel'],
...
Автор: AllRight88
