react-starter-kit中的require（'template.jade'）

Question

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 1

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):

• https://github.com/bline/jade-html-loader
• https://github.com/webpack/jade-loader

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

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

Answer 2

jade-loader reads the content of the specified file, which make look something like this (Jade string):

h1 Hello, #{author}!

..and replaces that with a CommonJS JavaScript code similar to this (at compile time):

module.exports = function(data) {
  return `<h1>Hello, ${data.name}</h1>`;
};