WCL Blog | WeChat MP & NPM

Topic: How to share code across mini-programs (and multiple projects) using NPM modules


WeChat mini-programs are all the rage right now, but from a technical point a view, things are still very much in their infancy.

Unlike other Javascript ecosystems, WeChat feels ostracized; proprietary IDE, bespoke runtime, and a packaging system that feels like a black box.

Mini-programs (MP for short) are supposed to be just that: ”mini”.

They’re not supposed to snowball like Node.js projects with thousands of NPM dependencies.

With that being said, using NPM has its advantages:

  • If you want to rely on small libraries for things like data formatting or functional programming.
  • If you want (need) to share code across multiple MPs, for example, an API request library or a UI component.

At any given our team is working on multiple WeChat mini-programs with multiple brands, from Nike and Burberry, to Tiffany and Hilton; let’s have a look at how we got to share code across projects.

  • How things work by default → copy pasta (needs example + needs to highlight the issues)
  • Slightly better → rollup (needs example example + needs to highlight the issues)
  • NPM stuff: the ideal case
  • Why it’s difficult → differences between WeChat & NPM and whatever
  • Tools you need
  • Things you can automate
  • Things you can NOT automate
  • Things we will try
  • Wrap up
  • → We’re able to do x (illustration of our approach + win)
  • → Cliffhanger (something else that we could talk about)
  • → Hiring




Copypasta


We initially started copying things from project to project.

It quickly became unmanageable (although it still does the trick in some cases).

MP runtime environment is so "unusual". Some NPM modules don't work out of the box and you need to patch them. For example, MP doesn't have `global`, and...


With a build system