Developers Club geek daily blog

1 year, 1 month ago
If you develop on modern javascript, then almost any your module contains a sheet of such lines:

import React from 'react'
import $ from 'jquery'
...

As it appeared, the majority of these lines can be not written, having entrusted their generation to automatic equipment. Also modern webpack in which as it appears, it is complete of pleasant surprises helps with it. Except all the known require and import for any files and "hot module replacement" which is already described on Habré, webpack can analyze your source code and automatically turn on the necessary modules on the basis of the used literals. Under a cat — the short description as works this magic.

The special plug-in of ProviderPlugin which is built in webpack is responsible for the analysis of your source codes and automatic creation of import of directives and does not demand installation. That the magic worked, it is necessary to specify a plug-in in the configuration file wbpack and to supply it with the identifier list and modules. It is known that webpack uses the esprima parser and therefore it has vesma faithful representation of structure of your code. Having met the specified indentifikator in the source code, webpack will generate a code of loading of the specified module the same as it it does it for import or require. Fragment of a configuration file:

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      'React':     'react',
...

When using a plug-in with a configuration from an example, webpack will look for use of an indentifikator of React. He will ignore such line:

const foo = "React";

and even such:

bar.React = true;

But having met here such, at once will understand that in this module ReactJS is used and will supply bundle fragment with a code of loading of the corresponding module:

React.createClass(…)

And of course nobody limits you only ReactJS. Use this method for popular libraries and often ispolzumy modules of your own project to make a code lakonicheny more simply:

new webpack.ProvidePlugin({
    '$':          'jquery',
    '_':          'lodash',
    'ReactDOM':   'react-dom',
    'cssModule':  'react-css-modules',
    'Promise':    'bluebird'
  })

P.S.


If you, as well as I, want to use ES6 import instead of old require, then it becomes by the instruction babel as loader'a for webpack. Also do not forget about .babelrc and presets — in the latest version of babel developers prepared a surprise for beginners, without the instruction presets babel does not do anything now:

module.exports = {
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['babel'],
...

This article is a translation of the original post at habrahabr.ru/post/274385/
If you have any questions regarding the material covered in the article above, please, contact the original author of the post.
If you have any complaints about this article or you want this article to be deleted, please, drop an email here: sysmagazine.com@gmail.com.

We believe that the knowledge, which is available at the most popular Russian IT blog habrahabr.ru, should be accessed by everyone, even though it is poorly translated.
Shared knowledge makes the world better.
Best wishes.

comments powered by Disqus