I'm going an automatic global registration. I'm struggling to figure how to exclude a specific sub directory. How would a regex for that look? I'm sorry to not have an example of a try but I have no idea honestly. Searching I found a few examples but it never matches to exclude just a directory.
This is how I get the components now.
const registerComponents = () => {
const pascalCase = (name: string) => {
return _.chain(name).camelCase().upperFirst().value()
}
const context = require.context('@/components', true, /\w \.(vue)$/)
_.forEach(context.keys(), fileName => {
const componentConfig = context(fileName)
const name = (fileName.split('/').pop() || '').replace(/\.\w $/, '')
const componentName = pascalCase(name)
Vue.component(componentName, componentConfig.default || componentConfig)
})
}
This is the structure. I would like to exclude the folder /_exclude/
components/_exclude/file.vue
components/_exclude/file2.vue
components/_exclude/svg/globe.vue
components/some-file.vue
components/svg/cart.vue
CodePudding user response:
This pattern would match all .vue
files except those in _exclude/
:
/^\.\/(?!_exclude\/).*\.vue$/
Breakdown of the pattern:
^\.\/
Match the leading ./
in the file paths returned from require.context()
.
(?!_exclude\/)
Using negative look-ahead, assert _exclude/
does not match.
.*
Match any character(s). Note the \w
from your original pattern would have failed on file separators in the file paths.
\.vue$
Match the .vue
file extension. Note the parentheses in (vue)
from your original pattern would have created an unecessary capture group.
CodePudding user response:
In your case, easy:
console.log( 'components/_exclude/file.vue'.replace(/\/_exclude\//,'/') ); // <- RegEx
console.log( 'components/_exclude/file2.vue'.replace('/_exclude/','/') ); // <- String
console.log( 'components/_exclude/svg/globe.vue'.replace(/\/_exclude\//,'/') );
console.log( 'components/some-file.vue'.replace(/\/_exclude\//,'/') );
console.log( 'components/svg/cart.vue'.replace(/\/_exclude\//,'/') );
console.log( ' --- Or ---' );
console.log(
`components/_exclude/file.vue
components/_exclude/file2.vue
components/_exclude/svg/globe.vue
components/some-file.vue
components/svg/cart.vue`.replace(/\/_exclude\//g,'/') // <-- Using global flag (g) in case of more than one
);
Also for taking the component name, we can use match
instead:
console.log( 'components/_exclude/file.vue'.match(/(?!\/)[^/]*?(?=(?:\.[^/.] ?)?(?:[?#].*)?$)/)[0] );
console.log( 'components/folder/file.vue?query=notme.ext'.match(/(?!\/)[^/]*?(?=(?:\.[^/.] ?)?(?:[?#].*)?$)/)[0] );
console.log( 'components/folder.name/file.vue'.match(/(?!\/)[^/]*?(?=(?:\.[^/.] ?)?(?:[?#].*)?$)/)[0] );
console.log( 'components/folder/file.min.vue'.match(/(?!\/)[^/]*?(?=(?:\.[^/.] ?)?(?:[?#].*)?$)/)[0] );
Update
General idea for take the pathInfo
managed:
pathInfo function
function pathInfo(s) {
s=s.match(/(.*?\/)?(([^/]*?)(\.[^/.] ?)?)(?:[?#].*)?$/);
return {folders:s[1],file:s[2],filename:s[3],fileext:s[4]};
}
var sample='folder/myfolder/excludeme/another/excludeme/onemore/file.min.js?query=1';
var result=pathInfo(sample);
console.log(result);
/*
{
"folders": "folder/myfolder/excludeme/another/excludeme/onemore/",
"file": "file.min.js",
"filename": "file.min",
"fileext": ".js"
}
*/
console.log(result.folders.split('/').filter(a=>a!='excludeme').join('/') result.file);
// folder/myfolder/another/onemore/file.min.js
pathInfo ( Folders list) function
function pathInfo(s) {
s=s.match(/(.*?\/)?(([^/]*?)(\.[^/.] ?)?)(?:[?#].*)?$/);
return {path:s[1],folders:s[1].split('/'),file:s[2],filename:s[3],fileext:s[4]};
}
var sample='folder/myfolder/excludeme/another/excludeme/onemore/file.min.js?query=1';
var result=pathInfo(sample);
console.log(result);
/*
{
"path": "folder/myfolder/excludeme/another/excludeme/onemore/",
"folders": [
"folder",
"myfolder",
"excludeme",
"another",
"excludeme",
"onemore",
""
],
"file": "file.min.js",
"filename": "file.min",
"fileext": ".js"
}
*/
console.log(result.folders.filter(a=>a!='excludeme').join('/') result.file);
// folder/myfolder/another/onemore/file.min.js