Скомпилируйте файлы шаблона / заглушки в переменные JS с помощью Laravel mix - PullRequest
4 голосов
/ 17 апреля 2019

У меня есть папка /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?

1 Ответ

0 голосов
/ 16 июня 2019

частичное решение

Спасибо Diogo Sgrillo за указание этого решения в комментарии.

Установка raw-загрузчика 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.

ЦСИ / шаблоны / 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.

...