Include directories from node_modules

Help
1

Base on this PR https://github.com/jekyll/jekyll/pull/7188 specific directories can be included. But it’s not working.

include:
  - 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?

Thanks.

1 Like
2

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
3

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 \
  assets/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
4

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

sass:
    load_paths:
        - _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:

include-npm-deps:
        @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/datatables.net/js/jquery.dataTables.min.js $(VENDOR_DIR)
        @cp node_modules/jquery/dist/jquery.min.map $(JSBUNDLE_DIR)
        @cp node_modules/popper.js/dist/umd/popper.min.js.map $(JSBUNDLE_DIR)
        @cp node_modules/bootstrap/dist/js/bootstrap.min.js.map $(JSBUNDLE_DIR)

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

thanks for the awesome information.

6

thanks my issue has been fixed.