40 个你绝对离不开的 NPM 库

3,039 阅读7分钟
原文链接: medium.com

Buckle up and get ready to get technical. Today we’re going to tell you all about the NPM modules we use here at Croissant. Why? Because sharing is caring. So without further ado, here they are, in alphabetical order:

agenda

This is what allows us to schedule what most people call “cron” jobs. For example, we have a job that runs every few minutes to make sure Croissanters don’t stay past the closing time of a venue. The last thing we want is a community manager to come in the next day and have the Granola Bars completely cleared out.

agenda-ui

This nice little utility easily plugs into our app to give us a nice UI for managing the aforementioned jobs. It’s like like the order screen at McDonalds, letting the employees know which orders are filled and which ones still need to get done.

async

We originally used async for doing multiple asynchronous things all at once, but we’ve since moved towards using “q” which you’ll find further down the list :) We still use it here and there, mostly the “waterfall” and “each” methods for something such as doing multiple database operations in a row that rely on each other.

aws-sdk

This allows us to upload stuff to AWS S3, i.e. those beautiful pictures showing off our awesome spaces!

bcryptjs

Worried about the security of your password? Don’t be! This algorithm is the industry standard. Even if we get hacked, your password will still just be a jumble of letters and symbols. Don’t make your password a simple dictionary word though, cause if someone did get this data, they can try all the words in the dictionary fairly quickly.

body-parser

We use the ExpressJS web server here, so we need a way to parse all those JSON responses. This trusty thingamajig does just that. It’s just one of those things you need when you use Express.

braintree

Yup, we use Braintree, the payments company that was acquired by PayPal. When we looked into a simple way to capture PayPal payments, this made sense because it has a very similar mechanism to Stripe, our credit card processor. The main ability is to put a customer token on file for use with recurring and overage charges. More on this when we talk about Stripe below.

chai

We use this in our integration tests. It’s great for making sure things act the way you expect them to, using the “expect” function :)

compression

This is another one of those Express things that you just need. It compresses server responses so the data travels faster across the internet. That’s about it. Good stuff.

express

This one is the big kahuna. This is the core module for the ExpressJS NodeJS web server, which saves us from having to write a ton of boilerplate HTTP server code. It comes with some cool features, such as the ability to specify a static files folder which acts as a simple file server, and of course the ability to easily drop in one of the many plugins created from its vibrant community.

forever

Ever have a node process or express server that crashed? This puppy will start her back up for you. It’s pretty smart too — you can specify how long the process needs to be running before it failed, for the restart to occur. This prevents an auto-failing process from being restarted over and over again.

fs-extra

When the “fs” module is just not enough, “fs-extra” gives you all that and more. We really just use it for its capability to make a nested folder if the parent folder didn’t exist. For some reason, that’s too much to ask for the “fs” folks.

This module is wizardry. GraphicsMagick is a wrapper for the long-lived ImageMagick C library that has been used through the ages by many an image manipulator. We use this to resize and crop our image uploads. You know all those beautiful venue images that we put on AWS? We used this on them first.

gulp

Gulp is always running in the background while we code. It automatically compresses our javascript and css files. We also use it to spawn our test runners. It has tons of packages (which you’re about to find out about)! Some people say it’s like “grunt”, but with streams.

gulp-angular-templatecache

Did we mention we use Angular? We use Angular. This gulp plugin allows us to smush together all our html templates into one file for a quicker load time on the website. Angular can then use this template to load the pages.

gulp-concat

Remember that smushing thing we talked about earlier? This takes care of that.

gulp-csso

Remember how we like smushing things? This lets us smush things into even smaller files by first minifying the css files that are about to be smushed.

gulp-istanbul

Gulp is also a great test runner, runner. While running tests, “istanbul” will output a report showing our unit and integration test coverage, with percentages showing how much code was covered in the test. Magical.

gulp-livereload

A must for front-end developers, this connects to your web browser and refreshes it every time you make a change to an html file. Good job, gulp.

gulp-mocha

More test stuff. This is just a wrapper for mocha, which we use for integration tests, such as making sure an API endpoint works as expected.

gulp-plumber

Because of all our streaming and piping with gulp, we need this little library. In case something like gulp-csso fails, this will keep things running smoothly.

gulp-sass

You thought we use CSS? Think again. Everything you see was once a young, budding, scss (a.k.a. Sass) file. Gulp watches and compiles our master css output every time we make a change.. super quick!

gulp-uglify

Last but not least, this gulp plugin does good ol’ uglification of front end JavaScript code so we can send it to you super fast and super securely.

jwt-simple

Back to reality, away from the gulpies, next we have the package that makes authorization easy. When you log in to Croissant, we take your information and smush it all together and encode it with jwt-simple and tell your browser what came out. Then, your browser uses the token we gave you each time it does something that requires you to be logged in.

lodash

Lodash embodies winning at life. All the stuff you ever needed for working with collections of objects and arrays in JavaScript all in one simple library. We are big fans of pick, omit, and contains — useful for limiting API server responses for quicker load times.

mime-types

We run a tight ship here at Croissant, and that means keeping track of the file types that we upload to AWS S3. One trick to doing this is taking the file extension and feeding it into this library, resulting in something like “image/jpeg” for a jpg file.

mocha

With this, all we need to do is type “mocha” and it runs a plethora of tests that we drew up using the “describe” and “it” functions for organizing tests. It doesn’t get much simpler than this for running JavaScript tests.

moment

Everyone who has ever programmed in anything has run into dealing with dates and times. JavaScript by itself is very basic, but moment makes it all better. With moment, you just pass in the raw JavaScript date object, and in return, you get a nice little ball of date and time functionality that you can play with, such as formatting, adding time, and altering.

moment-timezone

Don’t fall into the trap of forgetting about timezones though. If you’re not careful, someone on the other side of the world will think your store opens at 3 am instead of noon. This package is useful in converting our UTC server times into the timezone of the venue, so you know when to show up, no matter where you are in the world.

mongoose

Did we mention we use MongoDB? We use MongoDB. Mongoose keeps our team in the know, allowing us to always see at a glance what the structure of our data is. Without it, you might end up with all sorts of objects in the database, causing who knows what kind of chaos on the back and front ends.

morgan

Just like body-parser, this is another one of those packages that you simply cannot do without when running an Express server. Not only does it output all sorts of info, such as response time and path name whenever there is an HTTP request, but it also lets you customize (using a function!) what you want to see in the output.

newrelic

New Relic is a cool company that gives you info about your app. You simply add the package to the first line of code in your server, and then go onto their website to watch the magic happen. We use it to get notified if there are a bunch of errors happening on our server in production.

nodemailer

If you ever need to send email, don’t send it yourself — use a transactional email service, such as SendGrid. It comes with some great features, such as the ability to make a nice template that wraps all of our emails. Nodemailer is the package that lets us send simple messages to SendGrid.

prerender-node

Remember that Angular thing we use? It sucks for SEO because most search engines can’t understand it. In comes prerendering to the rescue. With it, web crawlers can easily see a non-Angular version of your website because the prerenderer estimated what it looks like. Turn off JavaScript in your web browser next time you browse Croissant and you’ll see what we mean.

protractor

Anyone who has ever worked with webdriver for automating browser tasks and tests, will quickly see the value in having an Angular wrapper. This wrapper waits for Angular to load on the page and waits for any promises to resolve before going to the next line of tests. This is handy for our app which is rich in asynchronous events.

While async is good for waterfalls and map operations, “q” is great for making promises. By that, we mean taking a normal callback function and wrapping it up in the “q” promise syntax. This lets us make promise chains involving asynchronous functions that normally use callbacks, a.k.a. callback hell.

request

Every once in a while we need to make a manual HTTP request to an external server. We’ve always stuck to using this package for doing this kind of task since the dawn of NodeJS. Mostly however, the sdk’s for the external services we use do this for us, using “request” under the hood.

slug

This is the library that turns “Hello There” into “hello-there”, perfect for making dynamic titles into URL-friendly links. We use this for taking the names of our venues and making that unique link that you can share with your buddies so they know where to find you.

stripe

Time to get paid. Stripe is our payment processor for credit cards. They’re nice enough to store customer credit card information in a PCI-compliant way so we don’t have to. We use their sdk to put cards on file and make charges.

supertest-as-promised

This is the core of our integration tests. Using promises we can easily expect a certain response status code, while also using the response data in the next step of the test. We use this with chai.

Welp, there you have it folks. Our list of goodies. We’re always open to questions, comments, and suggestions. Please be gentle :)

Dave
Co-founder & CEO, Croissant