If you ever wanted to update a Nuxt or Next config file programmatically.
Simplest way to understand what it does:
git clone https://github.com/hypervillain/babel-transform-config;
cd babel-transform-config && npm install;
node examples/nuxt.simple.js
This should display some info 👇
The actual nuxt.config.js
file that was read from file.
Something like:
export default {
css: [],
modules: ['@org/my-nuxt-module'],
build: {
webpack : {}
},
};
The arguments that were passed to babel-transform-config
.
Something like:
const args = {
css: ['path/to/file'],
modules: [
['my-module', { config: true }]
],
transpile: ['my-other-module']
}
// will be used like this:
// transformConfig(code, 'nuxt', args)
What you came for:
export default {
css: ["path/to/file"],
modules: ['@org/my-nuxt-module', ["my-module", {
"config": true
}]],
build: {
webpack: {},
transpile: ["my-other-module"]
}
};
This package exports a transformConfig
function that takes as arguments some code, a framework key, and key-value params that will help the module transform these arguments.
For example, these arguments:
const args = {
script: ['path/to/script-file.js']
}
transformConfig(myNuxtConfig, 'nuxt', args)
transformConfig
will try & match your script key and transform your arguments into:
transforms: [{
'head:script': {
action: 'create:merge',
value: ['path/to/script-file.js']
}
],
This will help the underlying Babel plugin perform the right actions, based on what it knows of your framework. The complete call:
const fs = require('fs')
const transformConfig = require('babel-transform-config')
const code = fs.readFileSync('path/to/config', 'utf8')
const args = { script: ['path/to/script-file.js'] }
const { code: updatedCode} = transformConfig(code, 'nuxt', args)
// ⚠️ this is experimental, please log things first
fs.writeFileSync('path/to/config', updatedCode, 'utf8')
Right now, transformConfig
only supports Nuxt framexwork. If you want to use things for yourself with another framework, you should use the lower-level transform method:
const { transform } = require('babel-transform-config')
const transforms = {
'head:script': { // create or replace export default { head: { script: [] }}
action: 'create:replace',
value: ['my/script.js']
},
'deleteMe': { // delete export default { deleteMe: ... }
action: 'delete'
},
'build:transpile': { // merges export default { babel: { transpile: arrayOrObject } }
action: 'merge',
value: ['path/to/file']
}
}
const { code: updatedCode } = transform(yourCustomCode, transforms)
👆 See examples/transform
.
ATM you'll need to use ES2015 export default
feature to use this plugin.