From 0e347a51d6adbe3743ffa435ec91713accc4b276 Mon Sep 17 00:00:00 2001 From: Zack Yang Date: Thu, 22 Sep 2016 13:58:05 +0800 Subject: [PATCH] build(dependency): modify for webpack 2 breaking changes --- app/component/auth.interceptor.js | 2 +- app/component/auth.spec.js | 11 ++++--- package.json | 48 ++++++++++++++++--------------- server/dev-server.js | 13 ++++----- webpack.build.js | 23 +++++++++------ webpack.config.js | 32 +++++++++------------ webpack.dev.js | 37 +++++++++++------------- webpack.test.js | 23 +++++++++------ 8 files changed, 95 insertions(+), 94 deletions(-) diff --git a/app/component/auth.interceptor.js b/app/component/auth.interceptor.js index 1d1041a..c6c6506 100644 --- a/app/component/auth.interceptor.js +++ b/app/component/auth.interceptor.js @@ -4,7 +4,7 @@ export default function($q, session) { // Add authorization token to headers request: function(config) { config.headers = config.headers || {}; - let token = session.get(session.getTokenKey()); + const token = session.get(session.getTokenKey()); if (token) { config.headers[session.getTokenHeader()] = 'Bearer ' + token; } diff --git a/app/component/auth.spec.js b/app/component/auth.spec.js index 2bfd72a..ca3f0af 100644 --- a/app/component/auth.spec.js +++ b/app/component/auth.spec.js @@ -34,7 +34,7 @@ describe('Provider: authProvider', () => { }); it('#configure() should extend config', () => { - let config = { + const config = { roles: { admin: 'admin', user: 'user' @@ -46,7 +46,7 @@ describe('Provider: authProvider', () => { }); it('#$get(<...injects>) should return auth service instance', () => { - let obj = authProvider.$get($q, rest, authService, session); + const obj = authProvider.$get($q, rest, authService, session); expect(obj.get).to.be.a('function'); expect(obj.login).to.be.a('function'); expect(obj.isAuthenticated).to.be.a('function'); @@ -63,14 +63,13 @@ describe('Provider: authProvider', () => { }); it('should return config without token header', () => { - let config = authInterceptor.request({}); + const config = authInterceptor.request({}); expect(config.headers).to.be.empty; }); it('should return config with token header', () => { - let config; session.create('sdfwersdf'); - config = authInterceptor.request({}); + const config = authInterceptor.request({}); expect(config.headers).to.eql({Authorization: 'Bearer sdfwersdf'}); }); }); @@ -85,7 +84,7 @@ describe('Provider: authProvider', () => { }); it('#login(, ) should check user login credentials', function(done) { - let fakeData = { token: '1234567890zxcvbnm' }; + const fakeData = { token: '1234567890zxcvbnm' }; $httpBackend.expectPOST('/auth/local', { username: 'admin', password: 'xxdeswersdf' diff --git a/package.json b/package.json index 4d9d925..e35bc6a 100644 --- a/package.json +++ b/package.json @@ -13,65 +13,67 @@ }, "scripts": { "validate": "npm run test:once && npm run check-coverage", - "test": "NODE_ENV=test BABEL_ENV=test karma start", - "test:once": "BABEL_ENV=test karma start", - "prebuild": "rm -rf dist && mkdir dist", - "build": "NODE_ENV=production webpack --config webpack.build.js --display-modules", + "test": "cross-env NODE_ENV=test BABEL_ENV=test karma start", + "test:once": "cross-env BABEL_ENV=test karma start", + "prebuild": "rimraf dist && mkdir dist", + "build": "cross-env NODE_ENV=production webpack --config webpack.build.js --display-modules", "commit": "git-cz", "check-coverage": "istanbul check-coverage --statements 75 --branches 75 --functions 75 --lines 75", "report-coverage": "cat ./coverage/lcov.info | codecov", - "start": "NODE_ENV=development node server/dev-server.js", + "start": "cross-env NODE_ENV=development node server/dev-server.js", "publish-latest": "publish-latest", "semantic-release": "semantic-release pre && npm publish && npm run publish-latest && semantic-release post" }, "devDependencies": { - "angular-material": "~1.0.2", "angular-animate": "~1.5.0", "angular-aria": "~1.5.0", + "angular-material": "~1.1.0", "angular-mocks": "~1.5.0", - "autoprefixer-loader": "~3.2.0", + "autoprefixer": "^6.4.0", "babel-core": "^6.0.0", "babel-eslint": "^6.0.4", "babel-loader": "^6.0.0", - "babel-plugin-lodash": "^3.2.4", "babel-plugin-__coverage__": "^11.0.0", - "babel-preset-es2015": "~6.9.0", + "babel-plugin-lodash": "^3.2.4", + "babel-preset-es2015": "^6.9.0", "codecov.io": "^0.1.6", "commitizen": "^2.8.0", - "css-loader": "~0.23.1", + "cross-env": "~2.0.1", + "css-loader": "^0.24.0", "cz-conventional-changelog": "^1.1.5", - "eslint": "^2.0.0", + "eslint": "^3.3.0", "eslint-loader": "^1.3.0", "file-loader": "~0.9.0", "ghooks": "^1.2.0", "html-webpack-plugin": "~2.22.0", "istanbul": "~0.4.2", "jquery": "~2.2.0", - "karma": "~0.13.19", + "karma": "~1.2.0", "karma-chai-plugins": "~0.7.0", - "karma-chrome-launcher": "~1.0.1", + "karma-chrome-launcher": "~2.0.0", "karma-coverage": "~1.1.0", "karma-mocha": "~1.1.1", "karma-sourcemap-loader": "~0.3.7", "karma-spec-reporter": "0.0.26", - "karma-webpack": "~1.7.0", - "lodash-webpack-plugin": "^0.9.2", - "mocha": "~2.5.3", - "ng-annotate-loader": "0.1.0", - "ng-cache-loader": "0.0.15", + "karma-webpack": "~1.8.0", + "lodash-webpack-plugin": "^0.10.0", + "mocha": "~3.0.0", + "ng-annotate-loader": "~0.1.0", + "ng-cache-loader": "~0.0.15", "node-bourbon": "~4.2.3", - "node-sass": "~3.8.0", + "node-sass": "~3.10.0", "opt-cli": "~1.5.1", - "postcss-loader": "~0.9.1", + "postcss-loader": "^0.11.0", + "progress-bar-webpack-plugin": "^1.9.0", "raw-loader": "~0.5.1", + "rimraf": "~2.5.4", "sass-loader": "~4.0.0", "semantic-release": "^4.3.5", "style-loader": "~0.13.0", "toastr": "~2.1.2", "url-loader": "~0.5.7", - "webpack": "2.1.0-beta.19", - "webpack-dev-server": "2.1.0-beta.0", - "webpack-notifier": "~1.3.0" + "webpack": "^2.1.0-beta.24", + "webpack-dev-server": "^2.1.0-beta.0" }, "repository": { "type": "git", diff --git a/server/dev-server.js b/server/dev-server.js index c18a587..ec50d40 100644 --- a/server/dev-server.js +++ b/server/dev-server.js @@ -1,19 +1,16 @@ -'use strict'; - -var webpack = require('webpack'); -var WebpackDevServer = require('webpack-dev-server'); -var config = require('../webpack.dev'); +const webpack = require('webpack'); +const WebpackDevServer = require('webpack-dev-server'); +const config = require('../webpack.dev'); new WebpackDevServer(webpack(config), { - hot: true, historyApiFallback: true, stats: { colors: true, } }) -.listen(config.port, config.ip, function(err) { +.listen(8080, 'localhost', function(err) { if (err) { throw err; } - console.log('Listening at ' + config.ip + ':' + config.port); + console.log('Listening at localhost:8080'); }); diff --git a/webpack.build.js b/webpack.build.js index aae7364..1530aec 100644 --- a/webpack.build.js +++ b/webpack.build.js @@ -1,7 +1,6 @@ -'use strict'; - -var webpack = require('webpack'); -var config = require('./webpack.config.js'); +const webpack = require('webpack'); +const autoprefixer = require('autoprefixer'); +const config = require('./webpack.config.js'); config.devtool = 'source-map'; config.entry = { @@ -43,21 +42,27 @@ config.externals = { } }; -config.module.postLoaders = [ - {test: /\.js$/, loader: 'ng-annotate', exclude: /(node_modules)/} -]; +config.module.rules = [ + {test: /\.js$/, loader: 'ng-annotate', exclude: /(node_modules)/, enforce: 'post'}, +].concat(config.module.rules); config.plugins.push( new webpack.optimize.DedupePlugin(), new webpack.LoaderOptionsPlugin({ minimize: true, debug: false, - quiet: true + quiet: true, + options:{ + postcss: [ + autoprefixer({ browsers: ['last 2 versions'] }) + ] + } }), new webpack.optimize.UglifyJsPlugin({ compress: { screw_ie8: true, - warnings: false + warnings: false, + dead_code: true } }) ); diff --git a/webpack.config.js b/webpack.config.js index 6b68098..a5e71c4 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,40 +1,34 @@ -'use strict'; - -var path = require('path'); -var webpack = require('webpack'); -var LodashModuleReplacementPlugin = require('lodash-webpack-plugin'); -var NODE_ENV = process.env.NODE_ENV; -var nodeRoot = path.join(__dirname, 'node_modules'); -var appRoot = path.join(__dirname, 'app'); -var config = { +const path = require('path'); +const webpack = require('webpack'); +const ProgressBarPlugin = require('progress-bar-webpack-plugin'); +const LodashModuleReplacementPlugin = require('lodash-webpack-plugin'); +const NODE_ENV = process.env.NODE_ENV; +const nodeRoot = path.join(__dirname, 'node_modules'); +const appRoot = path.join(__dirname, 'app'); +const config = { context: appRoot, output: { path: path.resolve(__dirname, 'dist'), filename: 'sanji-auth-ui.js' }, resolve: { - root: [nodeRoot], - // npm-linked packages can locate missing dependencies in app's node_modules - fallback: nodeRoot, alias: { 'angular-material.css': nodeRoot + '/angular-material/angular-material.css', 'angular-material-icons.css': nodeRoot + '/angular-material-icons/angular-material-icons.css', 'toastr.scss': nodeRoot + '/toastr/toastr.scss', 'svg-morpheus': nodeRoot + '/svg-morpheus/compile/unminified/svg-morpheus.js' }, - extensions: ['', '.js', '.json', 'html', 'scss', 'css'] + extensions: ['.js', '.json', 'html', 'scss', 'css'] }, module: { - preLoaders: [ - {test: /\.js$/, loader: 'eslint', exclude: /(node_modules)/} - ], - loaders: [ + rules: [ + {test: /\.js$/, loader: 'eslint', exclude: /node_modules/, enforce: 'pre'}, {test: /\.js$/, loader: 'babel?cacheDirectory', exclude: /(node_modules)/}, { test: /\.html$/, loader: 'ng-cache?prefix=[dir]/[dir]', exclude: [/node_modules/, path.join(__dirname, '/app/index.html')] } - ], - noParse: [] + ] }, plugins: [ + new ProgressBarPlugin(), new LodashModuleReplacementPlugin, new webpack.DefinePlugin({ __TEST__: 'test' === NODE_ENV, diff --git a/webpack.dev.js b/webpack.dev.js index cee59b0..b9169d5 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -1,39 +1,36 @@ -'use strict'; +const webpack = require('webpack'); +const autoprefixer = require('autoprefixer'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const bourbon = require('node-bourbon').includePaths; +const config = require('./webpack.config.js'); -var webpack = require('webpack'); -var autoprefixer = require('autoprefixer'); -var WebpackNotifierPlugin = require('webpack-notifier'); -var HtmlWebpackPlugin = require('html-webpack-plugin'); -var bourbon = require('node-bourbon').includePaths; -var config = require('./webpack.config.js'); - -config.ip = 'localhost'; -config.port = 8080; -config.debug = true; config.devtool = 'eval'; config.entry = { 'sanji-ui': [ 'webpack/hot/dev-server', - 'webpack-dev-server/client?http://' + config.ip + ':' + config.port, + 'webpack-dev-server/client?http://localhost:8080', './app.js' ] }; -config.module.loaders = [ +config.module.rules = [ + {test: /\.js$/, loader: 'ng-annotate', exclude: /(node_modules)/, enforce: 'post'}, {test: /\.scss/, loader: 'style!css!postcss!sass?includePaths[]=' + bourbon}, {test: /\.css$/, loader: 'style!css!postcss?browsers=last 2 versions'}, {test: /\.(png|jpg|gif|jpeg)$/, loader: 'url-loader?limit=8192', exclude: /node_modules/}, {test: /\.(woff|woff2)$/, loader: 'url?limit=10000&minetype=application/font-woff', exclude: /node_modules/}, {test: /\.(ttf|eot|svg)$/, loader: 'file', exclude: /node_modules/} -].concat(config.module.loaders); - -config.module.postLoaders = [ - {test: /\.js$/, loader: 'ng-annotate', exclude: /(node_modules)/} -]; -config.postcss = [ autoprefixer({ browsers: ['last 2 versions'] }) ]; +].concat(config.module.rules); config.plugins.push( new webpack.HotModuleReplacementPlugin(), - new WebpackNotifierPlugin({title: 'Webpack'}), + new webpack.LoaderOptionsPlugin({ + debug: true, + options: { + postcss: [ + autoprefixer({ browsers: ['last 2 versions'] }) + ] + } + }), new HtmlWebpackPlugin({ template: 'index.html', hash: true diff --git a/webpack.test.js b/webpack.test.js index 25d0e3b..2bd0319 100644 --- a/webpack.test.js +++ b/webpack.test.js @@ -1,8 +1,7 @@ -'use strict'; - -var config = require('./webpack.config'); -var autoprefixer = require('autoprefixer'); -var bourbon = require('node-bourbon').includePaths; +const webpack = require('webpack'); +const autoprefixer = require('autoprefixer'); +const config = require('./webpack.config'); +const bourbon = require('node-bourbon').includePaths; config.devtool = 'source-map'; // Should be an empty object if it's generating a test build @@ -12,14 +11,22 @@ config.entry = {}; // Karma will handle setting it up for you when it's a test build config.output = {}; -config.module.loaders = [ +config.module.rules = [ {test: /\.scss/, loader: 'style!css!postcss!sass?includePaths[]=' + bourbon}, {test: /\.css$/, loader: 'style!css!postcss'}, {test: /\.(png|jpg|gif|jpeg)$/, loader: 'url-loader?limit=8192'}, {test: /\.(woff|woff2)$/, loader: 'url?limit=10000&minetype=application/font-woff'}, {test: /\.(ttf|eot|svg)$/, loader: 'file'} -].concat(config.module.loaders); +].concat(config.module.rules); -config.postcss = [ autoprefixer({ browsers: ['last 2 versions'] }) ]; +config.plugins.push( + new webpack.LoaderOptionsPlugin({ + options:{ + postcss: [ + autoprefixer({ browsers: ['last 2 versions'] }) + ] + } + }) +); module.exports = config;