chore(build): dependencies and config updates

This commit is contained in:
nixa 2016-09-19 16:51:05 +03:00
parent 1ba236a067
commit 04a57b7b98
11 changed files with 650 additions and 614 deletions

View file

@ -11,7 +11,7 @@ function hasProcessFlag(flag) {
}
function isWebpackDevServer() {
return process.argv[1] && !! (/webpack-dev-server$/.exec(process.argv[1]));
return process.argv[1] && !! (/webpack-dev-server/.exec(process.argv[1]));
}
function root(args) {
@ -19,14 +19,6 @@ function root(args) {
return path.join.apply(path, [ROOT].concat(args));
}
function checkNodeImport(context, request, cb) {
if (!path.isAbsolute(request) && request.charAt(0) !== '.') {
cb(null, 'commonjs ' + request); return;
}
cb();
}
exports.hasProcessFlag = hasProcessFlag;
exports.isWebpackDevServer = isWebpackDevServer;
exports.root = root;
exports.checkNodeImport = checkNodeImport;

View file

@ -9,11 +9,13 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
const HtmlElementsPlugin = require('./html-elements-plugin');
const AssetsPlugin = require('assets-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
/*
* Webpack Constants
*/
const HMR = helpers.hasProcessFlag('hot');
const METADATA = {
title: 'ng2-admin - Angular 2 Admin Template',
description: 'Free Angular 2 and Bootstrap 4 Admin Template',
@ -26,7 +28,9 @@ const METADATA = {
*
* See: http://webpack.github.io/docs/configuration.html#cli
*/
module.exports = {
module.exports = function (options) {
isProd = options.env === 'production';
return {
/*
* Static metadata for index.html
@ -76,7 +80,7 @@ module.exports = {
root: helpers.root('src'),
// remove other default values
modulesDirectories: ['node_modules']
modulesDirectories: ['node_modules'],
},
@ -98,11 +102,11 @@ module.exports = {
loader: 'string-replace-loader',
query: {
search: '(System|SystemJS)(.*[\\n\\r]\\s*\\.|\\.)import\\((.+)\\)',
replace: '$1.import($3).then(mod => mod.__esModule ? mod.default : mod)',
replace: '$1.import($3).then(mod => (mod.__esModule && mod.default) ? mod.default : mod)',
flags: 'g'
},
include: [helpers.root('src')]
}
},
],
@ -125,7 +129,11 @@ module.exports = {
*/
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader', '@angularclass/hmr-loader'],
loaders: [
'@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,
'awesome-typescript-loader',
'angular2-template-loader'
],
exclude: [/\.(spec|e2e)\.ts$/]
},
@ -157,7 +165,10 @@ module.exports = {
{
test: /initial\.scss$/,
loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader!sass-loader?sourceMap' })
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: 'css-loader!sass-loader?sourceMap'
})
},
{
@ -190,17 +201,35 @@ module.exports = {
test: /\.(jpg|png|gif)$/,
loader: 'file'
}
]
],
postLoaders: [
{
test: /\.js$/,
loader: 'string-replace-loader',
query: {
search: 'var sourceMappingUrl = extractSourceMappingUrl\\(cssText\\);',
replace: 'var sourceMappingUrl = "";',
flags: 'g'
}
}
]
},
/*
* Add additional plugins to the compiler.
*
* See: http://webpack.github.io/docs/configuration.html#plugins
*/
plugins: [
new ExtractTextPlugin({ filename: 'initial.css', allChunks: true }),
new ExtractTextPlugin({filename: 'initial.css', allChunks: true}),
new AssetsPlugin({
path: helpers.root('dist'),
filename: 'webpack-assets.json',
prettyPrint: true
}),
/*
* Plugin: ForkCheckerPlugin
@ -209,7 +238,6 @@ module.exports = {
* See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
*/
new ForkCheckerPlugin(),
/*
* Plugin: CommonsChunkPlugin
* Description: Shares common code between the pages.
@ -297,4 +325,5 @@ module.exports = {
setImmediate: false
}
};
};
}

View file

@ -1,7 +1,3 @@
/**
* @author: @AngularClass
*/
const helpers = require('./helpers');
const webpackMerge = require('webpack-merge'); // used to merge webpack configs
const commonConfig = require('./webpack.common.js'); // the settings that are common to prod and dev
@ -18,9 +14,8 @@ const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 3000;
const HMR = helpers.hasProcessFlag('hot');
const METADATA = webpackMerge(commonConfig.metadata, {
const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
host: HOST,
port: PORT,
ENV: ENV,
@ -32,7 +27,8 @@ const METADATA = webpackMerge(commonConfig.metadata, {
*
* See: http://webpack.github.io/docs/configuration.html#cli
*/
module.exports = webpackMerge(commonConfig, {
module.exports = function(options) {
return webpackMerge(commonConfig({env: ENV}), {
/**
* Merged metadata from webpack.common.js for index.html
@ -84,7 +80,7 @@ module.exports = webpackMerge(commonConfig, {
*
* See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
*/
sourceMapFilename: '[file].map',
sourceMapFilename: '[name].map',
/** The filename of non-entry chunks as relative path
* inside the output.path directory.
@ -94,7 +90,7 @@ module.exports = webpackMerge(commonConfig, {
chunkFilename: '[id].chunk.js',
library: 'ac_[name]',
libraryTarget: 'var'
libraryTarget: 'var',
},
plugins: [
@ -115,7 +111,7 @@ module.exports = webpackMerge(commonConfig, {
'process.env': {
'ENV': JSON.stringify(METADATA.ENV),
'NODE_ENV': JSON.stringify(METADATA.ENV),
'HMR': METADATA.HMR
'HMR': METADATA.HMR,
}
}),
@ -125,7 +121,8 @@ module.exports = webpackMerge(commonConfig, {
*
* See: https://github.com/webpack/webpack/commit/a04ffb928365b19feb75087c63f13cadfc08e1eb
*/
new NamedModulesPlugin()
new NamedModulesPlugin(),
],
/**
@ -174,4 +171,5 @@ module.exports = webpackMerge(commonConfig, {
setImmediate: false
}
});
});
}

View file

@ -1,7 +1,3 @@
/**
* @author: @AngularClass
*/
const helpers = require('./helpers');
const webpackMerge = require('webpack-merge'); // used to merge webpack configs
const commonConfig = require('./webpack.common.js'); // the settings that are common to prod and dev
@ -16,21 +12,22 @@ const IgnorePlugin = require('webpack/lib/IgnorePlugin');
const DedupePlugin = require('webpack/lib/optimize/DedupePlugin');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CompressionPlugin = require('compression-webpack-plugin');
/**
* Webpack Constants
*/
const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 8080;
const METADATA = webpackMerge(commonConfig.metadata, {
const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
host: HOST,
port: PORT,
ENV: ENV,
HMR: false
});
module.exports = webpackMerge(commonConfig, {
module.exports = function(env) {
return webpackMerge(commonConfig({env: ENV}), {
/**
* Switch loaders to debug mode.
@ -128,7 +125,7 @@ module.exports = webpackMerge(commonConfig, {
'process.env': {
'ENV': JSON.stringify(METADATA.ENV),
'NODE_ENV': JSON.stringify(METADATA.ENV),
'HMR': METADATA.HMR
'HMR': METADATA.HMR,
}
}),
@ -157,10 +154,9 @@ module.exports = webpackMerge(commonConfig, {
beautify: false, //prod
/* eslint-disable camelcase */
// mangle: { screw_ie8 : true, keep_fnames: true }, //prod
mangle: false,
compress: { screw_ie8: true }, //prod
/* eslint-enable camelcase */
comments: false //prod
}),
@ -192,10 +188,11 @@ module.exports = webpackMerge(commonConfig, {
*
* See: https://github.com/webpack/compression-webpack-plugin
*/
new CompressionPlugin({
regExp: /\.css$|\.html$|\.js$|\.map$/,
threshold: 2 * 1024
})
// install compression-webpack-plugin
// new CompressionPlugin({
// regExp: /\.css$|\.html$|\.js$|\.map$/,
// threshold: 2 * 1024
// })
],
@ -244,4 +241,5 @@ module.exports = webpackMerge(commonConfig, {
setImmediate: false
}
});
});
}

View file

@ -20,6 +20,9 @@
"@angularclass/request-idle-callback": "^1.0.7",
"@angularclass/webpack-toolkit": "^1.3.3",
"@angularclass/conventions-loader": "^1.0.2",
"@angularclass/hmr": "~1.2.0",
"@angularclass/hmr-loader": "~3.0.2",
"assets-webpack-plugin": "^3.4.0",
"http-server": "^0.9.0",
"ie-shim": "^0.1.0",
@ -30,11 +33,11 @@
"ammap3": "github:amcharts/ammap3",
"animate.css": "^3.5.1",
"bootstrap": "4.0.0-alpha.2",
"bootstrap-loader": "1.1.2",
"bootstrap-loader": "1.1.6",
"chart.js": "^1.1.1",
"chartist": "^0.9.7",
"ckeditor": "^4.5.9",
"core-js": "^2.4.0",
"core-js": "^2.4.1",
"easy-pie-chart": "^2.1.7",
"extract-text-webpack-plugin": "2.0.0-beta.3",
"font-awesome": "^4.6.1",
@ -47,17 +50,15 @@
"leaflet": "^0.7.7",
"leaflet-map": "^0.2.1",
"lodash": "^4.12.0",
"ng2-bootstrap": "1.1.2",
"ng2-bootstrap": "1.1.5",
"ng2-tree": "^0.0.2-7",
"ng2-ckeditor": "1.0.7",
"ng2-smart-table": "^0.2.4",
"ng2-uploader": "0.5.14",
"ng2-uploader": "1.1.0",
"normalize.css": "^4.1.1",
"tether": "^1.2.4"
},
"devDependencies": {
"@angularclass/hmr": "^1.0.1",
"@angularclass/hmr-loader": "^1.0.1",
"angular2-template-loader": "^0.5.0",
"@types/core-js": "^0.9.28",
"@types/hammerjs": "^2.0.28",
@ -66,15 +67,14 @@
"@types/uglify-js": "^2.0.27",
"@types/webpack": "^1.12.29",
"@types/lodash": "0.0.28",
"angular2-hmr": "~0.8.0",
"gh-pages": "^0.11.0",
"parse5": "^1.3.2",
"rimraf": "^2.5.2",
"codelyzer": "~0.0.21",
"tslint": "^3.15.1",
"codelyzer": "~0.0.28",
"tslint": "3.15.1",
"ts-helpers": "1.1.1",
"ts-node": "^1.3.0",
"typedoc": "^0.4.4",
"typedoc": "^0.4.5",
"typescript": "2.0.0",
"awesome-typescript-loader": "^2.2.1",
"tslint-loader": "^2.1.3",
@ -82,15 +82,15 @@
"style-loader": "^0.13.1",
"raw-loader": "0.5.1",
"source-map-loader": "^0.1.5",
"string-replace-loader": "^1.0.3",
"string-replace-loader": "github:gdi2290/string-replace-loader",
"imports-loader": "^0.6.5",
"json-loader": "^0.5.4",
"css-loader": "^0.24.0",
"css-loader": "^0.25.0",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"file-loader": "^0.9.0",
"to-string-loader": "^1.1.4",
"sass-loader": "^3.2.0",
"sass-loader": "^4.0.2",
"resolve-url-loader": "^1.4.3",
"node-sass": "^3.5.3",
"html-webpack-plugin": "^2.21.0",
@ -98,9 +98,9 @@
"webpack": "^2.1.0-beta.21",
"webpack-dashboard": "^0.1.8",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "^2.1.0-beta.0",
"webpack-dev-server": "^2.1.0-beta.2",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^0.14.0",
"webpack-merge": "^0.14.1",
"compression-webpack-plugin": "^0.3.1",
"es6-promise": "^3.1.2",
"es6-shim": "^0.35.0",

View file

@ -3,7 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { removeNgStyles, createNewHosts } from '@angularclass/hmr';
import { removeNgStyles, createNewHosts, createInputTransfer } from '@angularclass/hmr';
/*
* Platform and Environment providers/directives/pipes
@ -13,7 +13,7 @@ import { routing } from './app.routing';
// App is our top level component
import { App } from './app.component';
import { AppState } from './app.service';
import { AppState, InteralStateType } from './app.service';
import { GlobalState } from './global.state';
import { NgaModule } from './theme/nga.module';
import { PagesModule } from './pages/pages.module';
@ -24,6 +24,12 @@ const APP_PROVIDERS = [
GlobalState
];
type StoreType = {
state: InteralStateType,
restoreInputValues: () => void,
disposeOldHosts: () => void
};
/**
* `AppModule` is the main entry point into Angular2's bootstraping process
*/
@ -51,28 +57,37 @@ const APP_PROVIDERS = [
export class AppModule {
constructor(public appRef: ApplicationRef, public appState: AppState) {
}
hmrOnInit(store) {
hmrOnInit(store: StoreType) {
if (!store || !store.state) return;
console.log('HMR store', store);
console.log('HMR store', JSON.stringify(store, null, 2));
// set state
this.appState._state = store.state;
// set input values
if ('restoreInputValues' in store) {
let restoreInputValues = store.restoreInputValues;
setTimeout(restoreInputValues);
}
this.appRef.tick();
delete store.state;
delete store.restoreInputValues;
}
hmrOnDestroy(store) {
hmrOnDestroy(store: StoreType) {
const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
// recreate elements
// save state
const state = this.appState._state;
store.state = state;
// recreate root elements
store.disposeOldHosts = createNewHosts(cmpLocation);
// save input values
store.restoreInputValues = createInputTransfer();
// remove styles
removeNgStyles();
}
hmrAfterDestroy(store) {
hmrAfterDestroy(store: StoreType) {
// display new elements
store.disposeOldHosts();
delete store.disposeOldHosts;

View file

@ -1,8 +1,12 @@
import { Injectable } from '@angular/core';
export type InteralStateType = {
[key: string]: any
};
@Injectable()
export class AppState {
_state = { };
_state: InteralStateType = {};
constructor() {
}
@ -11,6 +15,7 @@ export class AppState {
get state() {
return this._state = this._clone(this._state);
}
// never allow mutation
set state(value) {
throw new Error('do not mutate the `.state` directly');
@ -29,8 +34,8 @@ export class AppState {
}
_clone(object) {
private _clone(object: InteralStateType) {
// simple object clone
return JSON.parse(JSON.stringify( object ));
return JSON.parse(JSON.stringify(object));
}
}

View file

@ -4,13 +4,13 @@
import { enableDebugTools, disableDebugTools } from '@angular/platform-browser';
import { enableProdMode, ApplicationRef } from '@angular/core';
// Environment Providers
let PROVIDERS = [
let PROVIDERS: any[] = [
// common env directives
];
// Angular debug tools in the dev console
// https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md
let _decorateModuleRef = function identity(value) { return value; };
let _decorateModuleRef = function identity<T>(value: T): T { return value; };
if ('production' === ENV) {
// Production

View file

@ -52,8 +52,8 @@ interface SystemJS {
}
interface GlobalEnvironment {
ENV;
HMR;
ENV: string;
HMR: boolean;
SystemJS: SystemJS;
System: SystemJS;
}

View file

@ -3,7 +3,6 @@
*/
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { decorateModuleRef } from './app/environment';
import { ApplicationRef } from '@angular/core';
import { bootloader } from '@angularclass/hmr';
/*
* App Module

View file

@ -2,10 +2,10 @@
switch (process.env.NODE_ENV) {
case 'prod':
case 'production':
module.exports = require('./config/webpack.prod');
module.exports = require('./config/webpack.prod')({env: 'production'});
break;
case 'dev':
case 'development':
default:
module.exports = require('./config/webpack.dev');
module.exports = require('./config/webpack.dev')({env: 'development'});
}