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混合吗？如果没有，我有什么选择，我需要向Laravel应用添加什么？

Answer 1

部分解决方案

感谢 Diogo Sgrillo 在评论中指出了该解决方案。

安装原始加载程序 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，它就会中断。

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

1 个答案:

部分解决方案

webpack.mix.js

src / templates / index.js