When using npm, it is often the case that we aren't familiar with all of the code in the dependency tree. Building modern JavaScript applications relies on our ability to use the tools built for us by others.
When building web applications in React, along with Angular, Vue, etc., we work within the framework provided. Using npm, we download specific packages of code. The 'framework' then makes sure they are available in the code we create, allowing us to wield their powerful tools.
In this lab, we are going to practice the process of setting up a package.json
file. We will also install an npm package or two and use their functionality in
new code we write.
- Practice initializing a
package.json
file - Practice installing an npm package
- Introduce how to import a package into a different JavaScript file
There is only one tests for this lab written in test/indexTest.js
, but we
aren't able to run it! Try executing learn test
or npm test
(Note: learn test
wraps npm test
):
> npm test
This directory doesn't appear to have any specs in it.
This output makes sense because we don't have a package.json
file that
describes what the command test
is supposed to do! To get the tests working,
we will need to create the file. How do we go about doing that? By running
npm init
of course!
The package.json
can be written quickly from scratch, but we already have a
handy command for creating these files: npm init
.
Run npm init
and follow the prompts until a package.json
file is created.
Following, run the tests with npm test
:
> npm test
Error: no test specified
Bah humbug! Our tests in test/
still aren't working. We are missing our
testing framework and a test
script that makes use of it! Let's fix both:
We need to add in the necessary dependencies that will run our tests.
In the terminal, run npm install learn-browser
. You should see npm
take
action. When npm
is finished, package.json
will be updated with a new key:
dependencies
, with one dependency inside:
"dependencies": {
"learn-browser": "^0.1.17"
}
The version may be different, but this confirms that we've installed the package
correctly. Now all we need is to make sure our npm test
command knows to make
use of that testing package.
For npm test
to work, we need a test script that will trigger the suite to
run. In package.json
, replace the scripts
test
key value with the
following:
"scripts": {
"test": "node_modules/browser-sync/bin/browser-sync.js start --config node_modules/learn-browser/bs-config.js"
},
Try running npm test
now. Everything should be working and our browser should
open up to a test results view. This is because the test
script is now
correctly saying 'go run the code testing suite code, located in
browser-sync.js
with node_modules
'. As you can guess, browser-sync
provides us with an in-browser view of our test results.
Let's recap what we just did:
- Initialized our npm project using
npm init
, which createdpackage.lock
- Installed a testing framework,
learn-browser
, withnpm install learn-browser
- Edited the default
npm test
script to run our testing suite when called
The tests are looking for moment()
, a function that comes with
moment.js. Moment.js is a handy package for displaying dates and
times.
Install the moment
package and run npm test
once again.
If package.json
file has the correct packages, and the node module has been
installed, the test will pass and you should see a colorful clock appear!
We've departed from the shore and are now afloat on the sea of code. When building our own applications, we will often rely on existing packages to handle specific pieces of the project.
Although we only installed two packages in this lab, there are many layers of
dependencies for them, and hundreds of additional dependencies were installed.
It isn't necessary to understand how each of these works. The main thing to
grasp is how to implement and use the specific dependencies you need, in this
case, learn-browser
and moment
.
npm-lab-dc-web-060418's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.