使用 Laravel mix 将模板文件/存根编译为 JS 变量

Question

我有一个文件夹/resources/js/stubs .在该文件夹中放置了一些文件，例如 User.stub ，Controller.stub和Migration.stub 。我想通过做这样的事情在我的javascript中使用这些文件的内容

import Templates from './Templates.js'
console.log(Templates.User)
// The content of User.stub is printed

我不想使用这种方法

module.exports = name => `
...
`

我也可以使用后端将文件加载到视图中，但我不希望这样做。

因此，这需要预处理。我可以以某种方式用拉拉维尔混合来做吗？如果不是我的选择，我需要向我的Laravel应用程序添加什么？

Answer 1

部分解

感谢迪奥戈·斯格里洛在评论中指出此解决方案。

安装原始加载程序 yarn add raw-loader --dev

webpack.mix.js

添加此配置(在我的情况下，所有文件都将以.stub扩展名命名。

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /.stub$/i,
        use: 'raw-loader',
      },
    ],
  },
});

还要在webpack.mix.js中添加一个单独的管道，如下所示：

mix.js('src/templates/index.js', 'src/templates.js')

它将编译index.js文件中的模板列表并将它们放在templates.js 中。

src/templates/index.js

// Dynamically load all stubs using raw-loader (see webpack.mix.js)
let stubs = require.context('./', true, /.stub$/i);
// Create a object with the filename as key and content as value
exports.stubs = stubs.keys().reduce((result, key) => {
    return {
        [key.replace(/.//,'').replace(/.stub$/,'')] : stubs(key).default,
        ...result
    }
}, {});
export default { /* dont remove this export default or it will break !?? */}

稍后可以这样使用：

let templates = require('./templates.js')
console.log(templates['User.php'])

请评论或添加另一个答案，说明如何更顺利地做到这一点。exports/export有什么区别？我不能在这种方法中使用import，只需要，如果我尝试export default(或删除export default，它会中断.