Nunca mais escreva `import React from "react"`, graças ao webpack!

Quantas vezes no dia você escreve essa declaração?

import React from ‘react’

Ou então essa?

import ReactDOM from ‘react-dom’

Há algumas semanas atrás, um colega do Udacity me mostrou um truque que elimina essa necessidade repetitiva de declarar os imports no seu código. A mágica começa na linha 18, com o plugin ProvidePlugin do webpack:

Quando o webpack fizer o bundle do seu JavaScript, ele vai carregar o módulo react em todos os arquivos que o nome React for usado. Então podemos usar:

React.createClass(...)

…sem a necessidade de declarar o import React no topo do nosso arquivo.

O plugin ProvidePlugin do webpack não está limitado apenas ao React, é claro. Você pode usar isso para carregar qualquer módulo:

Isto não só leva a menos erros de compilação, como também, nos livra de blocos repetitivos de importação no topo dos nossos arquivos, como esses:

import ReactDOM from ‘react-dom’
import _ from ‘lodash’
import $ from ‘jquery’
import cssModule from ‘react-css-modules’

Chega ser irracional o tamanho da felicidade que isso trás, não acha? :)

Créditos

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store