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

Question

有人可以解释一下，这个构建时间require如何运作？

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

他们需要一个jade模板，哪个包或配置允许这个，我似乎无法自己找到它。

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

我认为更优雅：

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

Answer 1

作为RGraham mentioned in his comment，require来电被截获＆＃34;在webpack的应用程序包编译期间。这是使用"loaders"完成的，它定义了特定类型导入的特定行为：

  

加载程序允许您根据需要预先处理文件（）或“加载”它们。

在这种特殊情况下，执行此修改的加载程序可能是其中之一（或者我在搜索中找不到的另一个）：

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

编辑：查看project's own webpack configuration我们可以看到它是上面的第二个链接：

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

Answer 2

jade-loader读取指定文件的内容，看起来像这样（Jade string）：

h1 Hello, #{author}!

..并将其替换为与此类似的CommonJS JavaScript代码（在编译时）：

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