使用Webpack加载Mustache模板

Loading Mustache Templates with Webpack

本文关键字:模板 Mustache 加载 Webpack 使用      更新时间:2023-09-26

我和我的团队目前正在将一个相当大的项目从AMD+RequireJS迁移到CommonJS+Webpack。我们喜欢Webpack提供的工具,并认为CommonJS是社区的发展方向:紧跟潮流。

有什么有效的方法可以利用webpack来自动加载和捆绑我们的.胡子模板文件?目前,我们有一个watch脚本,它使用xport将项目文件夹中的所有.lisch文件捆绑到一个js文件中,格式为:

var files = {};
files['path/to/file'] = '<div>{{content}}</div>';
files['path/to/other/file'] = '<span>{{stuff}}</span>';
...

我们完全可以继续使用这个。。。我们当前的解决方案特别方便的是,当我们制作新模板时,不必在项目中专门引用我们的模板因为脚本只是在监视文件夹,所以字典会被更新,我们可以使用另一个库来获取字符串,并使其成为可用的模板函数。

那么目标是什么我很好奇是否有一种方法可以从我们文件夹中的模板->我们可以在代码中使用的函数,而不必特别要求将文件放入项目中。我们目前的解决方案超出了webpack(当然,除非有办法连接),这很烦人,因为我们不想要2个watch脚本。我研究过加载程序,但它们似乎是1对1的源文件->输出文件,而不是多对1,这就是我们当前解决方案的优点。

谢谢!

我认为您可以在require.context之上构建适合您需求的东西。将其指向您的模板目录,它将为您提供一个API来访问其中的模板。您可以将这种方法与胡子加载器相结合。