For the More Curious: npm and Bower Install
by Todd Gandee, Chris Aquino
Front-End Web Development: The Big Nerd Ranch Guide
- Title Page
- Acknowledgments
- Table of Contents
- Dedication
- Introduction
- I. Core Browser Programming
- 1. Setting Up Your Development Environment
- 2. Setting Up Your First Project
- 3. Styles
- 4. Responsive Layouts with Flexbox
- 5. Adaptive Layouts with Media Queries
- 6. Handling Events with JavaScript
- Preparing the Anchor Tags for Duty
- Your First Script
- Overview of the JavaScript for Ottergram
- Declaring String Variables
- Working in the Console
- Accessing DOM Elements
- Writing the setDetails Function
- Returning Values from Functions
- Adding an Event Listener
- Accessing All the Thumbnails
- Iterating Through the Array of Thumbnails
- Silver Challenge: Link Hijack
- Gold Challenge: Random Otters
- For the More Curious: Strict Mode
- For the More Curious: Closures
- For the More Curious: NodeLists and HTMLCollections
- For the More Curious: JavaScript Types
- 7. Visual Effects with CSS
- II. Modules, Objects, and Forms
- 8. Modules, Objects, and Methods
- Modules
- Setting Up CoffeeRun
- Creating the DataStore Module
- Adding Modules to a Namespace
- Constructors
- Creating the Truck Module
- Debugging
- Initializing CoffeeRun on Page Load
- Bronze Challenge: Truck ID for Non-Trekkies
- For the More Curious: Private Module Data
- Silver Challenge: Making data Private
- For the More Curious: Setting this in forEach’s Callback
- 9. Introduction to Bootstrap
- 10. Processing Forms with JavaScript
- 11. From Data to DOM
- 12. Validating Forms
- 13. Ajax
- 14. Deferreds and Promises
- 8. Modules, Objects, and Methods
- III. Real-Time Data
- 15. Introduction to Node.js
- Node and npm
- Hello, World
- Adding an npm Script
- Serving from Files
- Error Handling
- For the More Curious: npm Module Registry
- Bronze Challenge: Creating a Custom Error Page
- For the More Curious: MIME Types
- Silver Challenge: Providing a MIME Type Dynamically
- Gold Challenge: Moving Error Handling to Its Own Module
- 16. Real-Time Communication with WebSockets
- 17. Using ES6 with Babel
- Tools for Compiling JavaScript
- The Chattrbox Client Application
- First Steps with Babel
- Using Browserify for Packaging Modules
- Adding the ChatMessage Class
- Creating the ws-client Module
- For the More Curious: Compiling to JavaScript from Other Languages
- Bronze Challenge: Default Import Name
- Silver Challenge: Closed Connection Alert
- For the More Curious: Hoisting
- For the More Curious: Arrow Functions
- 18. ES6, the Adventure Continues
- Installing jQuery as a Node Module
- Creating the ChatForm Class
- Creating the ChatList Class
- Using Gravatars
- Prompting for Username
- User Session Storage
- Formatting and Updating Message Timestamps
- Bronze Challenge: Adding Visual Effects to Messages
- Silver Challenge: Caching Messages
- Gold Challenge: Separate Chat Rooms
- 15. Introduction to Node.js
- IV. Application Architecture
- 19. Introduction to MVC and Ember
- 20. Routing, Routes, and Models
- 21. Models and Data Binding
- 22. Data – Adapters, Serializers, and Transforms
- 23. Views and Templates
- 24. Controllers
- 25. Components
- 26. Afterword
- Index
The options --save-dev and
--save at the end of the commands npm install and
bower install add key/value pairs of library names and versions
to a JSON for each tool.
In the case of Bower, the JSON is bower.json;
for npm – as you saw in Chattrbox – it is package.json.
For example, in bower.json the key/value pairs added in this chapter were:
{
"name": "tracker",
"dependencies": {
"ember": "~2.4.3",
}
}
The file bower.json lists the dependency
ember.js with its minimum version number. The libraries
and assets listed will not be saved to your
development project repository or version control system, only the
bower.json file. A developer who checks out the
code can run bower install and npm install
to create a local environment for development.
-
No Comment