[ZEPPELIN-1850] Introduce Webpack (front)

### What is this PR for? <br/> **1. The purpose of this PR is introducing webpack to zeppelin-web** - It supports super-fast javascript compilation and (hot) reload - It helps to simplify, unify build process. - It enables for us to use `import`, `export` features. - It's more modern stack than grunt. This will encourage other developers to contribute (*the most import thing IMO*). **2. This PR is designed to improve build process _gradually!!!_** - So, Angular module loading depends on the import sequence as we did before in [index.html](https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/index.html#L171). (see [index.js](https://github.com/apache/zeppelin/pull/1805/files#diff-a128f4667c7e1afb6058389c20627b4e)). - Also, CSS and HTML file is not managed by webpack including its live reloading *These will be handled by additional PRs.* **3. This PR is not big** - 60+ file changes are just about removing `use strict`, importing `zeppelin.js`. (Also includes fixups for #1802 and #1803) - So skip them while reveiw - Please focus on the changes in `Gruntfile.js`, `package.json`, `webpack.config.js` <br/> ### What type of PR is it? [Improvement] ### Todos * [x] - Setup webpack.config.js * [x] - Resolve global variable `zeppelin` problem * [x] - Support webpack in karma (`npm run test`) * [x] - Annotate the result bundle using webpack ng annotate plugin * [x] - Fix eslint violations * [x] - Livereload for HTML, CSS ### What is the Jira issue? [ZEPPELIN-1850](https://issues.apache.org/jira/browse/ZEPPELIN-1850) ### How should this be tested? - `cd zeppelin-web && rm -rf node_modules bower_components node` - `npm install` - `npm run test` - `npm run build` - `npm run dev` and open `localhost:9000`: **check live-reload works regarding to html, css, js files** - `cd .. && mvn clean package -pl 'zeppelin-web' -DskipTests && ./bin/zeppelin-daemon.sh restart` and open `localhost:8080` ### Screenshots (if appropriate) N/A ### Questions: * Does the licenses files need update? - NO * Is there breaking changes for older versions? - NO * Does this needs documentation? - NO Author: 1ambda <1amb4a@gmail.com> Closes #1805 from 1ambda/ZEPPELIN-1850/introduce-webpack and squashes the following commits: 920589b [1ambda] REVIEW: Add strip-loader to remove console.log 6aa25b8 [1ambda] REVIEW: Update zeppelin-web/README.md bfc635b [1ambda] REVIEW: Rename to in package.json a6ffe42 [1ambda] WORKING: Ignore .babelrc in RAT 533531d [1ambda] WORKING: Cleanup Gruntfile.js fcca30f [1ambda] WORKING: LIVE RELOAD on css, html 4bff61c [1ambda] WORKING: DON'T COPY bower_components 45cb978 [1ambda] WORKING: Use webpack ng annotate plugin b0c7d01 [1ambda] WORKING: npm run build w/o ugly, ngAn d1352d0 [1ambda] WORKING: FIX ESLINT 7aed1bc [1ambda] WORKING: Remove grunt-karma ea7f186 [1ambda] WORKING: npm run test 94bedef [1ambda] WORKING: modularize grunt webpack task b8acc28 [1ambda] WORKING: Setup command properly. d715d2a [1ambda] WORKING: remove all js from index.html 71de16f [1ambda] WORKING: using ProvidePlugin ed04f4e [1ambda] FIXUP: #1802
apache · Dec 29, 2016 · 3f28865 · 3f28865
1 parent 4c1bc60
commit 3f28865
Show file tree

Hide file tree

Showing 76 changed files with 464 additions and 356 deletions.
diff --git a/zeppelin-web/.babelrc b/zeppelin-web/.babelrc
@@ -0,0 +1,5 @@
+{
+
+  "plugins": ["transform-object-rest-spread"],
+  "presets": ["es2015"]
+}
diff --git a/zeppelin-web/.eslintrc b/zeppelin-web/.eslintrc
@@ -8,7 +8,8 @@
   "parserOptions": {
     "ecmaFeatures": {
       "experimentalObjectRestSpread": true
-    }
+    },
+	"sourceType": "module"
   },
   "globals": {
     "angular": false,

diff --git a/zeppelin-web/Gruntfile.js b/zeppelin-web/Gruntfile.js
@@ -16,7 +16,6 @@
  */
 
 // Generated on 2014-08-29 using generator-angular 0.9.5
-'use strict';
 
 // # Globbing
 // for performance reasons we're only matching one level down:
@@ -50,14 +49,6 @@ module.exports = function(grunt) {
         presets: ['es2015'],
         plugins: ['transform-object-rest-spread']
       },
-      dev: {
-        files: [{
-          expand: true,
-          cwd: './src/',
-          src: ['**/*.js'],
-          dest: '.tmp',
-        }]
-      },
       dist: {
         files: [{
           expand: true,
@@ -144,23 +135,19 @@ module.exports = function(grunt) {
           '<%= yeoman.app %>/app/**/*.js',
           '<%= yeoman.app %>/components/**/*.js'
         ],
-        tasks: ['newer:eslint:all', 'newer:jscs:all', 'newer:babel:dev'],
-        options: {
-          livereload: '<%= connect.options.livereload %>'
-        }
+        tasks: ['newer:eslint:all', 'newer:jscs:all'],
       },
       html: {
         files: [
           '<%= yeoman.app %>/**/*.html'
         ],
-        tasks: ['newer:htmlhint', 'newer:copy:html']
+        tasks: ['newer:htmlhint']
       },
       jsTest: {
         files: ['test/spec/{,*/}*.js'],
         tasks: [
           'newer:eslint:test',
           'newer:jscs:test',
-          'newer:babel:dev',
           'karma'
         ]
       },
@@ -177,66 +164,17 @@ module.exports = function(grunt) {
         files: ['Gruntfile.js']
       },
       livereload: {
-        options: {
-          livereload: '<%= connect.options.livereload %>'
-        },
+        options: {livereload: 35729,},
         files: [
           '<%= yeoman.app %>/app/**/*.html',
           '<%= yeoman.app %>/*.html',
           '<%= yeoman.app %>/components/**/*.html',
-          '.tmp/styles/{,*/}*.css',
+          '<%= yeoman.app %>/**/*.css',
           '<%= yeoman.app %>/assets/images/**/*.{png,jpg,jpeg,gif,webp,svg}'
         ]
       }
     },
 
-    // The actual grunt server settings
-    connect: {
-      options: {
-        port: 9000,
-        // Change this to '0.0.0.0' to access the server from outside.
-        hostname: 'localhost',
-        livereload: 35729,
-        base: '.tmp',
-      },
-      livereload: {
-        options: {
-          open: false,
-          middleware: function(connect) {
-            return [
-              connect.static('.tmp'),
-              connect().use(
-                '/bower_components',
-                connect.static('./bower_components')
-              ),
-            ];
-          }
-        }
-      },
-      test: {
-        options: {
-          port: 9001,
-          middleware: function(connect) {
-            return [
-              connect.static('.tmp'),
-              connect.static('test'),
-              connect().use(
-                '/bower_components',
-                connect.static('./bower_components')
-              ),
-              connect.static(appConfig.app)
-            ];
-          }
-        }
-      },
-      dist: {
-        options: {
-          open: false,
-          base: '<%= yeoman.dist %>'
-        }
-      }
-    },
-
     jscs: {
       options: {
         config: '.jscsrc',
@@ -286,7 +224,7 @@ module.exports = function(grunt) {
           ]
         }]
       },
-      server: '.tmp'
+      tmp: '.tmp'
     },
 
     // Add vendor prefixed styles
@@ -336,7 +274,7 @@ module.exports = function(grunt) {
     // concat, minify and revision files. Creates configurations in memory so
     // additional tasks can operate on them
     useminPrepare: {
-      html: '<%= yeoman.app %>/index.html',
+      html: '<%= yeoman.dist %>/index.html',
       options: {
         dest: '<%= yeoman.dist %>',
         flow: {
@@ -429,65 +367,6 @@ module.exports = function(grunt) {
 
     // Copies remaining files to places other tasks can use
     copy: {
-      dev: {
-        files: [{
-          expand: true,
-          dot: true,
-          cwd: '<%= yeoman.app %>',
-          dest: '.tmp',
-          src: [
-            '*.{ico,png,txt}',
-            '.htaccess',
-            '*.html',
-            '**/*.css',
-            'assets/styles/**/*',
-            'assets/images/**/*',
-            'WEB-INF/*'
-          ]
-        }, {
-          // copy fonts
-          expand: true,
-          cwd: '<%= yeoman.app %>',
-          dest: '.tmp',
-          src: ['fonts/**/*.{eot,svg,ttf,woff}']
-        }, {
-          expand: true,
-          cwd: '<%= yeoman.app %>',
-          dest: '.tmp',
-          src: ['app/**/*.html', 'components/**/*.html']
-        }, {
-          expand: true,
-          cwd: 'bower_components/datatables/media/images',
-          src: '{,*/}*.{png,jpg,jpeg,gif}',
-          dest: '.tmp/images'
-        }, {
-          expand: true,
-          cwd: '.tmp/images',
-          dest: '.tmp/images',
-          src: ['generated/*']
-        }, {
-          expand: true,
-          cwd: 'bower_components/bootstrap/dist',
-          src: 'fonts/*',
-          dest: '.tmp'
-        }, {
-          expand: true,
-          cwd: 'bower_components/jquery-ui/themes/base/images',
-          src: '{,*/}*.{png,jpg,jpeg,gif}',
-          dest: '.tmp/styles/images'
-        }, {
-          expand: true,
-          cwd: 'bower_components/ngclipboard',
-          src: 'dist/**',
-          dest: '.tmp'
-        }, {
-          expand: true,
-          cwd: 'bower_components/MathJax',
-          src: [
-            'extensions/**', 'jax/**', 'fonts/**'],
-          dest: '.tmp'
-        }]
-      },
       dist: {
         files: [{
           expand: true,
@@ -497,7 +376,6 @@ module.exports = function(grunt) {
           src: [
             '*.{ico,png,txt}',
             '.htaccess',
-            '*.html',
             'assets/styles/**/*',
             'assets/images/**/*',
             'WEB-INF/*'
@@ -566,16 +444,10 @@ module.exports = function(grunt) {
 
     // Run some tasks in parallel to speed up the build process
     concurrent: {
-      server: [
-        'copy:dev'
-      ],
-      test: [
-        'copy:dev',
-      ],
       dist: [
         'copy:styles',
         'svgmin'
-      ]
+      ],
     },
 
     // Test settings
@@ -587,49 +459,30 @@ module.exports = function(grunt) {
     }
   });
 
-  grunt.registerTask('serve', 'Compile then start a connect web server', function(target) {
-    if (target === 'dist') {
-      return grunt.task.run(['build', 'connect:dist:keepalive']);
-    }
-
+  grunt.registerTask('pre-webpack-dev', 'Compile then start a connect web server', function(target) {
     grunt.task.run([
-      'clean:server',
+      'clean:tmp',
       'wiredep',
-      'concurrent:server',
-      'postcss',
-      'babel:dev',
-      'connect:livereload',
-      'watch'
     ]);
   });
 
-  grunt.registerTask('server', 'DEPRECATED TASK. Use the "serve" task instead', function(target) {
-    grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
-    grunt.task.run(['serve:' + target]);
-  });
-
-  grunt.registerTask('test', [
-    'clean:server',
-    'babel',
-    'wiredep',
-    'concurrent:test',
-    'postcss',
-    'babel:dev',
-    'connect:test',
-    'karma'
+  grunt.registerTask('watch-webpack-dev', [
+    'watch',
   ]);
 
-  grunt.registerTask('build', [
+  grunt.registerTask('pre-webpack-dist', [
     'jscs',
     'eslint',
     'htmlhint',
     'clean:dist',
     'wiredep',
+  ]);
+
+  grunt.registerTask('post-webpack-dist', [
     'useminPrepare',
     'concurrent:dist',
     'postcss',
     'concat',
-    'babel:dist',
     'ngAnnotate',
     'copy:dist',
     'cssmin',
@@ -640,7 +493,6 @@ module.exports = function(grunt) {
   ]);
 
   grunt.registerTask('default', [
-    'build',
-    'test'
+    'build'
   ]);
 };
diff --git a/zeppelin-web/README.md b/zeppelin-web/README.md
@@ -28,7 +28,7 @@ $ npm run build
 
 # run frontend application only in dev mode (localhost:9000) 
 # you need to run zeppelin backend instance also
-$ npm run start 
+$ npm run dev
 
 # execute tests
 $ npm run test