npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

makefile-for-js

v0.0.6

Published

makefile generator for JS files

Downloads

11

Readme

Makefile for JavaScript

Make only what you need.

  • implicit rules for making JS files (like how you type make in C source and it compiles)
  • Easy to modify and extend to different needs.
  • Nice, 'modern' makefile syntax. Easy to use. self documenting. Well commented.
  • Designed / tested with *nix type systems. Sorry windows.

JS transpile Features

  • Easy to read colorized output.
  • Knows how to 'do the right thing' for average cases.
  • Supports parallel builds out of the box: make --jobs=4.
  • Automatically splits bundle and vendor.
  • Supports code splitting.
  • Supports UMD builds for libraries.
  • Supports babel and eslint.
  • Supports gzipped and minimized targets.
  • Supports development and production modes.

Toolchain

Try it Out

mkdir test && cd test
npm init --yes
npm install makefile-for-js
npx makefile-project > Makefile # root project Makefile
make npm-install # will install compile dev tool packages to package
# sudo make npm-install USE_GLOBAL_COMPILE=1 USE_GLOBAL_PLUGIN_COMPILE=1 # will install globally and link to package
mkdir src && cd src
npx makefile-js > Makefile # src code Makefile
touch test.js
make 

Default will create PRJ_ROOT/public/dist/vendor.js and PRJ_ROOT/public/dist/bundle.js.

Explore

  • dependency chain After running make once try touch hello.js && make Notice that not as many files were rebuilt. The vendor.js bundle is only remade when you remake all the sources or package-lock.json is updated. Try adding hello2.js. hello.js Is already transpiled as build/hello.js. So makefile only needs to transpile hello2.js for the bundle. Everything is build 'smartly' like this where only the changes in the dependencies need to be rebuilt. If you keep most of your code in vendor your build times should be quite fast.

  • USE vars There a lots of switches to customize generation. Perhaps you dont need babel, then you could add USE_BABEL := in the Makefile so it would not transpile. You could also set it the command line for a one off like: make USE\_BABEL= (notice this is set after the make command. DONT DO USE_BABEL= make as the variable does not respect the environment. You could see all the USE\_* type settings with make help-use. You can check the default setting for USE_BABEL with make print-USE_BABEL.

  • make printall All important variables are shown with make printall. It does not show variables prepended with _, automatic, environment, help stuff, or built in kinds. These variables are set up to be changed as part of a 'public interface'. They use a type of Hungarian notion such as FILE_*, FILES_*, DIR_*, CMD_*, CMD_*_OPTIONS. This will give you and idea of important files and commands that are necessary for the makefile. All commands not part of basic shell commands (such as ls or echo) will be listed in make printall. If you really want to see all variables you can use make printall-raw.

  • targets default setup will make PROJECT_ROOT/public/dist/bundle.js and PROJECT_ROOT/public/vendor.js

  • defaults Code gen defaults to - eslinted, babelized ES5, minified in production, inline source maps in development, gzipped