Include directories from node_modules

Base on this PR specific directories can be included. But it’s not working.

  - node_modules/some-package/dist

The only way I found that works is to include node_modules and exclude all non-required packages and specific directories in required packages. Which isn’t practical.

Any insight on this or am I reading the above thread wrong about including specific directories in node_modules?


1 Like

One work-around is to use a symbolic link to the dist folder. For example:

ln -s node_modules/some-package/dist mydist

Now, when you build the site, the contents of some-package/dist will be copied to _site/mydist/.

1 Like

I don’t think symbolic link will work.

When Jekyll builds it will copy the symlink and not the contents of the directory.

Also in _site you will have a reference to ./node_modules/... which is invalid.

So you can make it absolute but then it won’t work on another machine.

The way I solve this is a command at build time locally or CI.

cp node_modules/foo/dist/bar.js assets/js

# multiple at once
cp node_modules/foo/dist/bar.js \
  node_modules/fizz/buzz.js \

jekyll build

And then make sure those are in .gitignore file.

When Jekyll runs it will copy assets/js to _site/assets/js.

That can be done inside Makefile or package.json script commands.

No need to mess with include field or symlinks.

Or for a simple project, drop use of node_modules altogether and just reference JS files in HTML by CDN URL.

1 Like

If you’re talking sass, then in your config you can:

        - _sass
        - node_modules
        - assets/css
        - assets/vendor

if you’re talking about js, then move things around during your build process.

Here’s a portion of my Makefile:

        @if [ ! -d "$(VENDOR_DIR)" ]; then mkdir -p $(VENDOR_DIR); fi
        @if [ ! -d "$(JSBUNDLE_DIR)" ]; then mkdir -p $(JSBUNDLE_DIR); fi
        @cp node_modules/jquery/dist/jquery.min.js $(VENDOR_DIR)
        @cp node_modules/popper.js/dist/umd/popper.min.js $(VENDOR_DIR)
        @cp node_modules/bootstrap/dist/js/bootstrap.min.js $(VENDOR_DIR)
        @cp node_modules/ $(VENDOR_DIR)
        @cp node_modules/jquery/dist/ $(JSBUNDLE_DIR)
        @cp node_modules/popper.js/dist/umd/ $(JSBUNDLE_DIR)
        @cp node_modules/bootstrap/dist/js/ $(JSBUNDLE_DIR)

build: include-npm-deps
        @export JEKYLL_ENV=production
        @echo "Building Production _site"
        @$(BUNDLE) exec $(JEKYLL) build
1 Like

thanks for the awesome information.

thanks my issue has been fixed.