В Webpack встроен загрузчик JSON. Как я могу написать собственный загрузчик, который не пытается запустить встроенный загрузчик JSON на результат?
По сути, я хочу, чтобы мой загрузчик принял объект конфигурации (хранящийся в файле JSON) и сгенерировал исходный код из этой конфигурации, которая больше не является допустимым JSON, это JavaScript (который впоследствии может быть загружен через загрузчик babel).
Вот действительно глупый, надуманный пример. Исходный файл представляет собой файл JSON, но я хочу, чтобы на выходе моего загрузчика вместо этого был какой-то JS.
function compile(doc) {
return `alert(${JSON.stringify(doc.title)})`
}
function myLoader(source) {
return compile(JSON.parse(source))
}
rules: [
{
test: /\.json$/,
use: [
'babel-loader',
'my-loader',
],
},
],
Вместо этого я получаю эту ошибку:
ERROR in ./config.json
Module parse failed: Unexpected token ' in JSON at position 0
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token ' in JSON at position 0
at JSON.parse (<anonymous>)
at JsonParser.parse (.../node_modules/webpack/lib/JsonParser.js:15:21)
Как видно из трассировки стека, он исходит от webpack/lib/JsonParser.js
. Как я могу сказать Webpack, чтобы он не запускал встроенный анализатор JSON, а вместо этого делегировал обработку файлов JSON, соответствующих этому правилу, моему загрузчику?
Здесь цель состоит в том, чтобы import './config.json'
скомпилировал JSON в исполняемый JS во время сборки, потому что в настоящее время приложение просто встраивает наш объект JSON в пакет приложения и выполняет эту работу во время выполнения. Поскольку это ресурсоемкая задача в нашем приложении, и поскольку JSON является постоянным, мы хотим скомпилировать JSON непосредственно в исполняемый код.
проверьте этот stackoverflow.com/questions/35563915/…, надеюсь, он поможет (и если он работает - пожалуйста, создайте / подтвердите ответ самостоятельно)
Думаю, я понял это, хотя это, похоже, недокументированная функция (по крайней мере, я не смог найти ее в документы конфигурации.
Похоже, что одно из свойств, которые вы можете передать в объекте Rule, - это type
. Установив для него значение javascript/auto
, вы можете переопределить парсер JSON по умолчанию и заставить его анализировать источник файла как JavaScript.
Это свойство находится в Схема JSON, используемом Webpack для проверки объекта конфигурации.
rules: [
{
test: /\.json$/,
use: [
'babel-loader',
'my-loader',
],
type: 'javascript/auto',
},
],
Как насчет того, чтобы просто использовать
const config = require('./config.json');
?