Если вы разрабатываете на современном 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'], ... ссылка на оригинал статьи http://habrahabr.ru/post/274385/
Добавить комментарий