Pepijn Pepijn - 6 months ago 15
Javascript Question

require('template.jade') in react-starter-kit

Can someone maybe explain me, how this build-time

require
works?

https://github.com/kriasoft/react-starter-kit/blob/feature/redux/src/server.js#L89

They are requiring a
jade
template, which package or configuration allows this, I seem unable to find it myself.

const template = require('./views/index.jade')


I think is much more elegant then:

import jade from 'jade'
const template = jade.compile('./views/index.jade')

Answer

As RGraham mentioned in his comment, the require call is being "intercepted" during webpack's compilation of the application bundle. This is done using "loaders" that define particular behaviour for imports of a particular type:

Loaders allow you to preprocess files as you require() or “load” them.

In this particular case, the loader that does this modification could be one of these (or another that I didn't find in my search):

Edit: looking at the project's own webpack configuration we can see it is the second link above:

{
  test: /\.jade$/,
  loader: 'jade-loader',
}