最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to restrict Webpack `require.context` neatly? - Stack Overflow

programmeradmin2浏览0评论

I am developing a little static site generator on top of Webpack and React. Currently I'm making it more dynamic. One part of this is making it more configurable.

Given a site structure like this

.
├── _book
├── assets
├── build
├── drafts
├── manuscript
├── node_modules
├── pages
├── project_source
└── styles

I would want to require files only from certain directory or directories. In this case it would be enough to require Markdown files from manuscript. Naively var req = require.context('manuscript', true, /^\.\/.*\.md$/) would work.

The problem is that this needs to bee dynamic as I pass the directory through site generator configuration. As require.context relies on fixed values I think I need to change context to site root using something like var req = require.context('.', true, /^.*\.md$/) and then check against req.keys() to match against my configuration.

In practice this is extremely slow as it will traverse the whole tree! Especially node_modules can contain a lot of files and this is something that should be avoided at all costs.

Is there a neat way to exclude node_modules out of require.context? I suppose some form of Regex might work although I am open for other ideas.

I am developing a little static site generator on top of Webpack and React. Currently I'm making it more dynamic. One part of this is making it more configurable.

Given a site structure like this

.
├── _book
├── assets
├── build
├── drafts
├── manuscript
├── node_modules
├── pages
├── project_source
└── styles

I would want to require files only from certain directory or directories. In this case it would be enough to require Markdown files from manuscript. Naively var req = require.context('manuscript', true, /^\.\/.*\.md$/) would work.

The problem is that this needs to bee dynamic as I pass the directory through site generator configuration. As require.context relies on fixed values I think I need to change context to site root using something like var req = require.context('.', true, /^.*\.md$/) and then check against req.keys() to match against my configuration.

In practice this is extremely slow as it will traverse the whole tree! Especially node_modules can contain a lot of files and this is something that should be avoided at all costs.

Is there a neat way to exclude node_modules out of require.context? I suppose some form of Regex might work although I am open for other ideas.

Share Improve this question asked May 12, 2015 at 16:44 Juho VepsäläinenJuho Vepsäläinen 26.9k13 gold badges82 silver badges108 bronze badges 8
  • Does calling require.context overwrite previous context? – Olim Saidov Commented May 12, 2015 at 17:25
  • @OlimSaidov The magic should happen at paths.js. config maps to site configuration (I provide the paths there). I should be able to set up context at allPosts function. I hope this clarifies the situation. – Juho Vepsäläinen Commented May 12, 2015 at 17:41
  • Can you iterate over directories using fs.readdirSync and calling require.context ignoring node_modules folder? – Olim Saidov Commented May 12, 2015 at 17:56
  • The problem is that I'm not in Node context in that file so fs operations are not permitted. paths.js ends up in development bundle. I could trigger fs.readdirSync outside of this context and inject data through config. That wouldn't solve require.context issue as far as I can see. – Juho Vepsäläinen Commented May 12, 2015 at 18:05
  • Note that I have absolute control over Webpack configuration. Modifying that is simple. Maybe the answer is just to avoid require.context altogether and go through something like resolve.alias... – Juho Vepsäläinen Commented May 12, 2015 at 18:07
 |  Show 3 more ments

2 Answers 2

Reset to default 12

You could try:

var req = require.context('.', true, /^((?![\\/]node_modules|vendor[\\/]).)*\.md$/);

to exclude paths containing node_modules and vendor folders from the match.

I ended up solving the problem by pushing require.context outside of the static site generator and within the external configuration. I have little snippets like this there:

paths: {
    demo: {
        path: function() {
            return require.context('./demo', true, /^\.\/.*\.md$/);
        },
    }
}

Then at generator side I just consume these contexts.

It's not the solution I was hoping for but it works.

发布评论

评论列表(0)

  1. 暂无评论