chore(*): switch from bower to npm for frontend dependencies

gkalpak · petebacondarwin · commit 531841ae9fbf · 2016-12-07T21:48:32.000Z
This is an alternative to angular#385. Closes angular#385
diff --git a/.bowerrc b/.bowerrc
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,7 @@
 logs/*
 !.gitkeep
 node_modules/
-bower_components/
+app/lib/
 tmp
 .DS_Store
 .idea
diff --git a/.travis.yml b/.travis.yml
@@ -3,7 +3,7 @@ dist: trusty
 
 language: node_js
 node_js:
-  - '4.5'
+  - 6
 
 install:
   - export DISPLAY=:99.0
diff --git a/README.md b/README.md
@@ -42,27 +42,27 @@ The `depth=1` tells git to only pull down one commit worth of historical data.
 We have two kinds of dependencies in this project: tools and Angular framework code. The tools help
 us manage and test the application.
 
-* We get the tools we depend upon via `npm`, the [Node package manager][npm].
-* We get the Angular code via `bower`, a [client-side code package manager][bower].
+* We get the tools we depend upon and the Angular code via `npm`, the [Node package manager][npm].
 * In order to run the end-to-end tests, you will also need to have the
   [Java Development Kit (JDK)][jdk] installed on your machine. Check out the section on
   [end-to-end testing](#e2e-testing) for more info.
 
-We have preconfigured `npm` to automatically run `bower` so we can simply do:
+We have preconfigured `npm` to automatically copy the downloaded Angular files to `app/lib` so we
+can simply do:
 
 ```
 npm install
 ```
 
-Behind the scenes this will also call `bower install`. After that, you should find out that you have
-two new folders in your project.
+Behind the scenes this will also call `npm run copy-libs`, which runs a simple JS script that copies
+the Angular files and other fronted dependencies. After that, you should find out that you have two
+new directories in your project.
 
 * `node_modules` - contains the npm packages for the tools we need
-* `app/bower_components` - contains the Angular framework files
+* `app/lib` - contains the Angular framework files and other frontend dependencies
 
-*Note that the `bower_components` folder would normally be installed in the root folder but
-`angular-seed` changes this location through the `.bowerrc` file. Putting it in the `app` folder
-makes it easier to serve the files by a web server.*
+*Note copying the Angular files from `node_modules` to `app/lib` makes it easier to serve the files
+by a web server.*
 
 ### Run the Application
 
@@ -198,9 +198,8 @@ script:
 npm run update-deps
 ```
 
-This will call `npm update` and `bower update`, which in turn will find and install the latest
-versions that match the version ranges specified in the `package.json` and `bower.json` files
-respectively.
+This will call `npm update` and `npm run copy-libs`, which in turn will find and install the latest
+versions that match the version ranges specified in the `package.json` file.
 
 
 ## Loading Angular Asynchronously
@@ -236,7 +235,7 @@ choose to install the tool globally:
 sudo npm install -g http-server
 ```
 
-Then you can start your own development web server to serve static files from a folder by running:
+Then you can start your own development web server to serve static files from any folder by running:
 
 ```
 http-server -a localhost -p 8000
@@ -279,7 +278,6 @@ For more information on AngularJS please check out [angularjs.org][angularjs].
 
 
 [angularjs]: https://angularjs.org/
-[bower]: http://bower.io/
 [git]: https://git-scm.com/
 [http-server]: https://github.com/indexzero/http-server
 [jasmine]: https://jasmine.github.io/
diff --git a/app/index-async.html b/app/index-async.html
@@ -2,14 +2,14 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
-  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
+  <link rel="stylesheet" href="lib/html5-boilerplate/dist/css/normalize.css">
+  <link rel="stylesheet" href="lib/html5-boilerplate/dist/css/main.css">
   <style>
     [ng-cloak] {
       display: none;
     }
   </style>
-  <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
+  <script src="lib/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
   <script>
     // include angular loader, which allows the files to load in any order
     //@@NG_LOADER_START@@
@@ -28,8 +28,8 @@
 
     // load all of the dependencies asynchronously.
     $script([
-      'bower_components/angular/angular.js',
-      'bower_components/angular-route/angular-route.js',
+      'lib/angular/angular.js',
+      'lib/angular-route/angular-route.js',
       'app.js',
       'view1/view1.js',
       'view2/view2.js',
diff --git a/app/index.html b/app/index.html
@@ -9,10 +9,10 @@
   <title>My AngularJS App</title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
-  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
+  <link rel="stylesheet" href="lib/html5-boilerplate/dist/css/normalize.css">
+  <link rel="stylesheet" href="lib/html5-boilerplate/dist/css/main.css">
   <link rel="stylesheet" href="app.css">
-  <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
+  <script src="lib/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
 </head>
 <body>
   <ul class="menu">
@@ -31,8 +31,8 @@
   <!-- In production use:
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
   -->
-  <script src="bower_components/angular/angular.js"></script>
-  <script src="bower_components/angular-route/angular-route.js"></script>
+  <script src="lib/angular/angular.js"></script>
+  <script src="lib/angular-route/angular-route.js"></script>
   <script src="app.js"></script>
   <script src="view1/view1.js"></script>
   <script src="view2/view2.js"></script>
diff --git a/bower.json b/bower.json
diff --git a/e2e-tests/protractor.conf.js b/e2e-tests/protractor.conf.js
@@ -13,7 +13,7 @@ exports.config = {
 
   baseUrl: 'http://localhost:8000/',
 
-  framework: 'jasmine',
+  framework: 'jasmine2',
 
   jasmineNodeOpts: {
     defaultTimeoutInterval: 30000
diff --git a/karma.conf.js b/karma.conf.js
@@ -5,9 +5,9 @@ module.exports = function(config) {
     basePath: './app',
 
     files: [
-      'bower_components/angular/angular.js',
-      'bower_components/angular-route/angular-route.js',
-      'bower_components/angular-mocks/angular-mocks.js',
+      'lib/angular/angular.js',
+      'lib/angular-route/angular-route.js',
+      '../node_modules/angular-mocks/angular-mocks.js',
       'components/**/*.js',
       'view*/**/*.js'
     ],
diff --git a/package.json b/package.json
@@ -5,7 +5,15 @@
   "description": "A starter project for AngularJS",
   "repository": "https://github.com/angular/angular-seed",
   "license": "MIT",
+  "dependencies": {
+    "angular": "^1.5.9",
+    "angular-loader": "^1.5.9",
+    "angular-route": "^1.5.9",
+    "html5-boilerplate": "0.0.1",
+    "shelljs": "^0.7.5"
+  },
   "devDependencies": {
+    "angular-mocks": "^1.5.9",
     "bower": "^1.7.7",
     "http-server": "^0.9.0",
     "jasmine-core": "^2.4.1",
@@ -17,15 +25,17 @@
     "protractor": "^4.0.9"
   },
   "scripts": {
-    "postinstall": "bower install",
+    "postinstall": "npm run copy-libs",
 
     "update-deps": "npm update",
-    "postupdate-deps": "bower update",
+    "postupdate-deps": "npm run copy-libs",
+
+    "copy-libs": "node scripts/copy-libs.js",
 
     "prestart": "npm install",
     "start": "http-server -a localhost -p 8000 -c-1 ./app",
-
     "pretest": "npm install",
+
     "test": "karma start karma.conf.js",
     "test-single-run": "karma start karma.conf.js --single-run",
 
@@ -35,6 +45,6 @@
     "preprotractor": "npm run update-webdriver",
     "protractor": "protractor e2e-tests/protractor.conf.js",
 
-    "update-index-async": "node -e \"var fs=require('fs'),indexFile='app/index-async.html',loaderFile='app/bower_components/angular-loader/angular-loader.min.js',loaderText=fs.readFileSync(loaderFile,'utf-8').split(/sourceMappingURL=angular-loader.min.js.map/).join('sourceMappingURL=bower_components/angular-loader/angular-loader.min.js.map'),indexText=fs.readFileSync(indexFile,'utf-8').split(/\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/).join('//@@NG_LOADER_START@@\\n'+loaderText+'    //@@NG_LOADER_END@@');fs.writeFileSync(indexFile,indexText);\""
+    "update-index-async": "node -e \"var fs=require('fs'),indexFile='app/index-async.html',loaderFile='app/lib/angular-loader/angular-loader.min.js',loaderText=fs.readFileSync(loaderFile,'utf-8').split(/sourceMappingURL=angular-loader.min.js.map/).join('sourceMappingURL=lib/angular-loader/angular-loader.min.js.map'),indexText=fs.readFileSync(indexFile,'utf-8').split(/\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/).join('//@@NG_LOADER_START@@\\n'+loaderText+'    //@@NG_LOADER_END@@');fs.writeFileSync(indexFile,indexText);\""
   }
 }
diff --git a/scripts/copy-libs.js b/scripts/copy-libs.js
@@ -0,0 +1,35 @@
+'use strict';
+
+// Constants
+const baseSrcDir = 'node_modules';
+const baseDstDir = 'app/lib';
+const files = [
+  'html5-boilerplate/dist/css/main.css',
+  'html5-boilerplate/dist/css/normalize.css',
+  'html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js',
+  'angular/angular.js',
+  'angular/angular.min.js',
+  'angular/angular.min.js.map',
+  'angular-route/angular-route.js',
+  'angular-route/angular-route.min.js',
+  'angular-route/angular-route.min.js.map',
+  'angular-loader/angular-loader.js',
+  'angular-loader/angular-loader.min.js',
+  'angular-loader/angular-loader.min.js.map'
+];
+
+// Imports
+const path = require('path');
+const shx = require('shelljs');
+
+// Copy lib files
+shx.rm('-rf', baseDstDir);
+
+files.forEach(relPath => {
+  const srcPath = path.join(baseSrcDir, relPath);
+  const dstPath = path.join(baseDstDir, relPath);
+  const dstDir = path.dirname(dstPath);
+
+  shx.mkdir('-p', dstDir);
+  shx.cp(srcPath, dstDir);
+});
