micro-app - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/micro-app.js

 /*!
  * @ProjectName micro-app
- * @Version 1.0.1
+ * @Version 1.0.2
  * @Author lixinliang(https://github.com/lixinliang)
- * @Update 2016-11-23 11:27:48 am
+ * @Update 2016-12-07 9:11:44 am
  */
@@ -61,3 +61,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 /* 0 */
-/***/ function(module, exports) {
+/***/ function(module, exports, __webpack_require__) {
 
@@ -255,2 +255,4 @@ 'use strict';
 
+	var supportConfigurable = Object.getOwnPropertyDescriptor(function () {}, 'name').configurable;
+
 	/**
@@ -264,13 +266,20 @@ * Override a function on microApp
 	    // Reset the method name
-	    defineProperty(microApp, name, defineProperty(defineProperty(function () {
-	        // `bubbles` as a flag
-	        var bubbles = true;
-	        var result = handler.call(this, {
-	            stopPropagation: function stopPropagation() {
-	                bubbles = false;
-	            }
-	        }, arguments);
-	        // Interrupt the function chain by `event.stopPropagation` and give the `result` as return value
-	        return bubbles ? method.apply(this, arguments) : result;
-	    }, 'name', name), 'toString', function toString() {
+	    defineProperty(microApp, name, defineProperty(function () {
+	        var anonymous = function anonymous() {
+	            // `bubbles` as a flag
+	            var bubbles = true;
+	            var result = handler.call(this, {
+	                stopPropagation: function stopPropagation() {
+	                    bubbles = false;
+	                }
+	            }, arguments);
+	            // Interrupt the function chain by `event.stopPropagation` and give the `result` as return value
+	            return bubbles ? method.apply(this, arguments) : result;
+	        };
+	        if (supportConfigurable) {
+	            return defineProperty(anonymous, 'name', name);
+	        } else {
+	            return anonymous;
+	        }
+	    }(), 'toString', function toString() {
 	        return 'function ' + name + '() { [native code] }';
@@ -417,3 +426,3 @@ }));
 	// Version
-	defineProperty(microApp, 'version', '1.0.1');
+	defineProperty(microApp, 'version', ("1.0.2"));
 
@@ -420,0 +429,0 @@ // Define a filter by `microApp.filter`

dist/micro-app.min.js

 /*!
  * @ProjectName micro-app
- * @Version 1.0.1
+ * @Version 1.0.2
  * @Author lixinliang(https://github.com/lixinliang)
- * @Update 2016-11-23 11:28:05 am
+ * @Update 2016-12-07 9:12:02 am
  */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.microApp=e():t.microApp=e()}(this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var r=i[n]={exports:{},id:n,loaded:!1};return t[n].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e){"use strict";function i(t,e){if("string"!=typeof t||"function"!=typeof e)throw new TypeError("[micro-app] microApp.filter( name : String, method : Function );");var n=t.match(/\|/);if(n)throw new TypeError('[micro-app] "'+n[0]+'" is not allowed.');return i[t]=e,this}function n(t,e){var i=void 0,r=void 0;"string"==typeof t?i=r=t:(i=t[0],r=t[1]);var o=w.getAttribute(r);null!==o&&e(r,o,null);var c={get:function(){return o},set:function(t){return t!==o&&e(r,t,o),o=t},enumerable:!1};a(w,i,c),n[i]=!0,i!=r&&(a(w,r,c),n[r]=!0)}var r=document,o=r.head,a=Object.defineProperty.bind(Object),c=navigator.userAgent,p=/\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(c),u=!/iPad/i.test(c),l=/\bversion\/([0-9.]+(?: beta)?)(?: mobile(?:\/[a-z0-9]+)?)? safari\//i.test(c),s=parseInt((c.match(/\bcpu(?: iphone)? os /i.test(c)?/\bcpu(?: iphone)? os ([0-9._]+)/i:/\biph os ([0-9_]+)/i)||[,0])[1]),f=function(t){return o.appendChild(t),t},h=function(t){o.removeChild(t)},v=[[["72x72","144x144"],["76x76","152x152"]],[["57x57","114x114"],["60x60","120x120"]]],d={},m="device-width",b="device-height";u?(d[m]=320,d[b]=480,[{width:320,height:568},{width:375,height:667},{width:414,height:736}].forEach(function(t){matchMedia("("+m+":"+t.width+"px)and("+b+":"+t.height+"px)").matches&&(d[m]=t.width,d[b]=t.height)}),d[m]+="px",d[b]+="px"):(d[m]="768px",d[b]="1024px"),d["-webkit-device-pixel-ratio"]=devicePixelRatio;var x=function(t){if("icon"==t){var e=v[+u][+(s>6)][+(devicePixelRatio>1)];return{sizes:e}}if("splash"==t){var i=[];for(var n in d)i.push("("+n+":"+d[n]+")");if(!u||3==devicePixelRatio){var r="(orientation:landscape)";matchMedia(r).matches?i.push(r):i.push("(orientation:portrait)")}var o=i.join("and");return{media:o}}},g=r.createElement("div"),y=function(t){return g.innerHTML=t,g.firstElementChild},w=r.querySelector("script[micro-app]")||f(y("<script micro-app>")),A=function(t,e,i){return a(t,e,{value:i,writable:!1,enumerable:!1,configurable:!1})},P=function(t,e){var i=w[t];A(w,t,A(A(function(){var t=!0,n=e.call(this,{stopPropagation:function(){t=!1}},arguments);return t?i.apply(this,arguments):n},"name",t),"toString",function(){return"function "+t+"() { [native code] }"}))},E=Element.prototype,j=E.setAttribute,S=E.removeAttribute,O=function(t,e,i){null===i?S.call(t,e):j.call(t,e,i)},C={}.toString.call([]),M="[object Base64]",R=function(t,e){var n=[];return function(r,o,a){var c=o instanceof Array?o.slice(0):null===o?[]:[o];n.forEach(function(t){h(t)}),n=[];for(var p=c.length,u=0;u<p;u++){var l=c[u];null!==l&&!function(){var r=y(t);if(l instanceof Object){O(r,e,void 0);for(var o in l)O(r,o,l[o])}else O(r,e,l);var a=r.getAttribute(e);a.indexOf("#")>-1&&!function(){var t=a.split("#");O(r,e,t[0]),O(r,"filter",t[1]);var n=!1;t[1].split("|").forEach(function(t){if(!n){var e=i[t];e&&(n=e.call(r)===!1)}})}(),n.push(f(r))}()}O(w,r,o instanceof Array?C:/^data:image/.test(o)?M:o)}};A(w,"version","1.0.1"),A(w,"filter",i),p&&l&&!function(){w.filter("precomposed",function(){this.rel="apple-touch-icon-precomposed"}).filter("autosize",function(){var t="apple-touch-startup-image"==this.getAttribute("rel")?"splash":"icon",e=x(t);if(e)for(var i in e)this.setAttribute(i,e[i])});var t=y('<meta name="apple-mobile-web-app-capable" content="yes">');n("capable",function(e,i,n){O(w,e,i),null===i&&h(t),null===n&&f(t)});var e=y('<meta name="apple-mobile-web-app-status-bar-style">');n(["statusBarStyle","status-bar-style"],function(t,i,n){O(w,t,i),O(e,"content",i),null===i&&h(e),null===n&&f(e)});var i=y('<meta name="apple-mobile-web-app-title">');n("title",function(t,e,n){O(w,t,e),O(i,"content",e),null===e&&h(i),null===n&&f(i)}),n("icon",R('<link rel="apple-touch-icon">',"href")),n("splash",R('<link rel="apple-touch-startup-image">',"href")),P("getAttribute",function(t,e){var i=e[0];if(w===this&&i in n)return t.stopPropagation(),w[i]}),P("setAttribute",function(t,e){var i=e[0],r=e[1];if(w===this&&i in n)return t.stopPropagation(),w[i]=r}),P("removeAttribute",function(t,e){var i=e[0];if(w===this&&i in n)return t.stopPropagation(),w[i]=null})}(),t.exports=window.microApp=w}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.microApp=e():t.microApp=e()}(this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var r=i[n]={exports:{},id:n,loaded:!1};return t[n].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){"use strict";function n(t,e){if("string"!=typeof t||"function"!=typeof e)throw new TypeError("[micro-app] microApp.filter( name : String, method : Function );");var i=t.match(/\|/);if(i)throw new TypeError('[micro-app] "'+i[0]+'" is not allowed.');return n[t]=e,this}function r(t,e){var i=void 0,n=void 0;"string"==typeof t?i=n=t:(i=t[0],n=t[1]);var o=A.getAttribute(n);null!==o&&e(n,o,null);var a={get:function(){return o},set:function(t){return t!==o&&e(n,t,o),o=t},enumerable:!1};c(A,i,a),r[i]=!0,i!=n&&(c(A,n,a),r[n]=!0)}var o=document,a=o.head,c=Object.defineProperty.bind(Object),u=navigator.userAgent,p=/\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(u),l=!/iPad/i.test(u),s=/\bversion\/([0-9.]+(?: beta)?)(?: mobile(?:\/[a-z0-9]+)?)? safari\//i.test(u),f=parseInt((u.match(/\bcpu(?: iphone)? os /i.test(u)?/\bcpu(?: iphone)? os ([0-9._]+)/i:/\biph os ([0-9_]+)/i)||[,0])[1]),h=function(t){return a.appendChild(t),t},v=function(t){a.removeChild(t)},d=[[["72x72","144x144"],["76x76","152x152"]],[["57x57","114x114"],["60x60","120x120"]]],m={},b="device-width",g="device-height";l?(m[b]=320,m[g]=480,[{width:320,height:568},{width:375,height:667},{width:414,height:736}].forEach(function(t){matchMedia("("+b+":"+t.width+"px)and("+g+":"+t.height+"px)").matches&&(m[b]=t.width,m[g]=t.height)}),m[b]+="px",m[g]+="px"):(m[b]="768px",m[g]="1024px"),m["-webkit-device-pixel-ratio"]=devicePixelRatio;var x=function(t){if("icon"==t){var e=d[+l][+(f>6)][+(devicePixelRatio>1)];return{sizes:e}}if("splash"==t){var i=[];for(var n in m)i.push("("+n+":"+m[n]+")");if(!l||3==devicePixelRatio){var r="(orientation:landscape)";matchMedia(r).matches?i.push(r):i.push("(orientation:portrait)")}var o=i.join("and");return{media:o}}},y=o.createElement("div"),w=function(t){return y.innerHTML=t,y.firstElementChild},A=o.querySelector("script[micro-app]")||h(w("<script micro-app>")),P=function(t,e,i){return c(t,e,{value:i,writable:!1,enumerable:!1,configurable:!1})},j=Object.getOwnPropertyDescriptor(function(){},"name").configurable,E=function(t,e){var i=A[t];P(A,t,P(function(){var n=function(){var t=!0,n=e.call(this,{stopPropagation:function(){t=!1}},arguments);return t?i.apply(this,arguments):n};return j?P(n,"name",t):n}(),"toString",function(){return"function "+t+"() { [native code] }"}))},O=Element.prototype,S=O.setAttribute,C=O.removeAttribute,M=function(t,e,i){null===i?C.call(t,e):S.call(t,e,i)},k={}.toString.call([]),z="[object Base64]",R=function(t,e){var i=[];return function(r,o,a){var c=o instanceof Array?o.slice(0):null===o?[]:[o];i.forEach(function(t){v(t)}),i=[];for(var u=c.length,p=0;p<u;p++){var l=c[p];null!==l&&!function(){var r=w(t);if(l instanceof Object){M(r,e,void 0);for(var o in l)M(r,o,l[o])}else M(r,e,l);var a=r.getAttribute(e);a.indexOf("#")>-1&&!function(){var t=a.split("#");M(r,e,t[0]),M(r,"filter",t[1]);var i=!1;t[1].split("|").forEach(function(t){if(!i){var e=n[t];e&&(i=e.call(r)===!1)}})}(),i.push(h(r))}()}M(A,r,o instanceof Array?k:/^data:image/.test(o)?z:o)}};P(A,"version","1.0.2"),P(A,"filter",n),p&&s&&!function(){A.filter("precomposed",function(){this.rel="apple-touch-icon-precomposed"}).filter("autosize",function(){var t="apple-touch-startup-image"==this.getAttribute("rel")?"splash":"icon",e=x(t);if(e)for(var i in e)this.setAttribute(i,e[i])});var t=w('<meta name="apple-mobile-web-app-capable" content="yes">');r("capable",function(e,i,n){M(A,e,i),null===i&&v(t),null===n&&h(t)});var e=w('<meta name="apple-mobile-web-app-status-bar-style">');r(["statusBarStyle","status-bar-style"],function(t,i,n){M(A,t,i),M(e,"content",i),null===i&&v(e),null===n&&h(e)});var i=w('<meta name="apple-mobile-web-app-title">');r("title",function(t,e,n){M(A,t,e),M(i,"content",e),null===e&&v(i),null===n&&h(i)}),r("icon",R('<link rel="apple-touch-icon">',"href")),r("splash",R('<link rel="apple-touch-startup-image">',"href")),E("getAttribute",function(t,e){var i=e[0];if(A===this&&i in r)return t.stopPropagation(),A[i]}),E("setAttribute",function(t,e){var i=e[0],n=e[1];if(A===this&&i in r)return t.stopPropagation(),A[i]=n}),E("removeAttribute",function(t,e){var i=e[0];if(A===this&&i in r)return t.stopPropagation(),A[i]=null})}(),t.exports=window.microApp=A}])});

package.json

 {
   "name": "micro-app",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "(<5kb) [📱iOS] Create Progressive Web App Dynamically.",
@@ -35,3 +35,3 @@ "main": "dist/micro-app.min.js",
   "devDependencies": {
-    "autoprefixer-loader": "^3.2.0",
+    "autoprefixer": "^6.5.3",
     "babel-core": "^6.9.1",
@@ -48,3 +48,6 @@ "babel-loader": "^6.2.4",
     "fs-extra": "^0.30.0",
-    "inline-source": "^5.0.0",
+    "html-loader": "^0.4.4",
+    "html-replace-webpack-plugin": "^2.2.3",
+    "html-webpack-inline-source-plugin": "0.0.3",
+    "html-webpack-plugin": "^2.24.1",
     "inquirer": "^1.1.3",
@@ -56,2 +59,3 @@ "jquery": "^3.1.1",
     "node-sass": "^3.7.0",
+    "postcss-loader": "^1.2.0",
     "publish-please": "^2.2.0",
@@ -62,3 +66,2 @@ "rollup": "^0.36.3",
     "style-loader": "^0.13.1",
-    "to-string-loader": "^1.1.4",
     "url-loader": "^0.5.7",
@@ -65,0 +68,0 @@ "vue": "^1.0.28",

src/entry/micro-app.js

@@ -21,3 +21,3 @@ import {
 // Version
-defineProperty(microApp, 'version', '@VERSION');
+defineProperty(microApp, 'version', process.env.VERSION);
 
@@ -24,0 +24,0 @@ // Define a filter by `microApp.filter`

src/entry/modules/override.js

 import microApp from './namespace.js';
 import defineProperty from './define-property.js';
 
+const supportConfigurable = Object.getOwnPropertyDescriptor(() => {}, 'name').configurable;
+
 /**
@@ -16,4 +18,4 @@ * Override a function on microApp
         defineProperty(
-            defineProperty(
-                function () {
+            (() => {
+                let anonymous = function () {
                     // `bubbles` as a flag
@@ -32,6 +34,13 @@ let bubbles = true;
                     return bubbles ? method.apply(this, arguments) : result;
-                },
-                'name',
-                name
-            ),
+                };
+                if (supportConfigurable) {
+                    return defineProperty(
+                        anonymous,
+                        'name',
+                        name
+                    );
+                } else {
+                    return anonymous;
+                }
+            })(),
             'toString',
@@ -38,0 +47,0 @@ function toString () { return `function ${ name }() { [native code] }` }

webpack/webpack.build.js

 'use strict';
 
+let fs = require('fs');
 let path = require('path');
 let moment = require('moment');
 let webpack = require('webpack');
-let Profile = require('./webpack.profile.js');
-let ExtractText = require('extract-text-webpack-plugin');
+let autoprefixer = require('autoprefixer');
+let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
 
-const alias = {};
+let HtmlWebpackPlugin = require('html-webpack-plugin');
+let HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin');
+// let HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
+
 const entry = require('./webpack.entry.json');
 const packageJson = require('../package.json');
 
+const alias = {};
+const imageSize = 10240 * 3;
+const sourcePath = path.join(__dirname, '../src');
+const constant = {
+    NODE_ENV : 'production',
+    NAME : packageJson.name,
+    VERSION : packageJson.version,
+};
+
 const banner =
@@ -19,11 +32,29 @@ `@ProjectName ${ packageJson.name }
 
-const imageSize = 10240;
+process.argv.forEach(( param ) => {
+    if (/^--/.test(param)) {
+        let temp = param.slice(2).split('=');
+        let key = temp[0];
+        let value = temp[1] || true;
+        process.argv[key] = value;
+    }
+});
 
-module.exports = {
+let config = {
     entry,
-    output : {
-        path : './dist/js/',
-        filename : '[name].js',
-    },
-    extensions : ['.vue', '.js', '.json', '.scss', '.html'],
+    output : (() => {
+        if (process.argv.build == 'js') {
+            return {
+                path : './dist/',
+                filename : `[name]${ process.argv.uglify ? '.min' : '' }.js`,
+                library : process.argv.library,
+                libraryTarget : process.argv.libraryTarget,
+            };
+        } else {
+            return {
+                path : './dist/js/',
+                filename : '[name].js',
+            };
+        }
+    })(),
+    extensions : ['.vue', '.js', '.json', '.scss'],
     resolve : {
@@ -39,6 +70,2 @@ alias,
             {
-                test : /\.html$/,
-                loader : 'vue-html',
-            },
-            {
                 test : /\.(png|jpg|gif|svg)$/,
@@ -49,7 +76,7 @@ loader : `url?limit=${ imageSize }&name=../img/[name].[ext]?[hash]`,
                 test : /\.css$/,
-                loader : ExtractText.extract('style', 'css'),
+                loader : process.argv.build == 'js' ? 'css!postcss' : ExtractTextWebpackPlugin.extract('style', 'css!postcss'),
             },
             {
                 test : /\.scss$/,
-                loader : ExtractText.extract('style', 'css?localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass'),
+                loader : process.argv.build == 'js' ? 'css!postcss!sass' : ExtractTextWebpackPlugin.extract('style', 'css!postcss!sass'),
             },
@@ -69,17 +96,11 @@ {
     plugins : [
-        new ExtractText('../css/[name].css'),
-        new webpack.Profile(),
-        new webpack.DefinePlugin({
-            'process.env': {
-                NODE_ENV : '"production"',
-            },
-        }),
-        new webpack.optimize.UglifyJsPlugin({
-            compress : {
-                warnings : false,
-            },
-            output : {
-                comments : false,
-            },
-        }),
+        new webpack.DefinePlugin((() => {
+            let result = {};
+            Object.keys(constant).forEach(( key ) => {
+                result[key] = JSON.stringify(constant[key]);
+            });
+            return {
+                'process.env' : result,
+            };
+        })()),
         new webpack.BannerPlugin(banner),
@@ -89,33 +110,53 @@ ],
         loaders : {
-            sass : ExtractText.extract('style', 'css!autoprefixer?browsers=last 2 version!sass?indentedSyntax'),
-            scss : ExtractText.extract('style', 'css!autoprefixer?browsers=last 2 version!sass'),
-        }
+            sass : ExtractTextWebpackPlugin.extract('style', 'css!postcss!sass'),
+            scss : ExtractTextWebpackPlugin.extract('style', 'css!postcss!sass'),
+        },
     },
+    postcss () {
+        return [autoprefixer({ browsers : ['last 2 versions'] })];
+    },
 };
 
-process.argv.forEach(( param ) => {
-    if (/^--/.test(param)) {
-        let temp = param.slice(2).split('=');
-        let key = temp[0];
-        let value = temp[1] || true;
-        process.argv[key] = value;
-    }
-});
 if (process.argv.build == 'js') {
     if (process.argv.uglify) {
-        module.exports.plugins.shift();
-    } else {
-        module.exports.plugins.splice(3, 1);
-        module.exports.plugins.shift();
+        config.plugins.unshift(new webpack.optimize.UglifyJsPlugin({
+            compress : {
+                warnings : false,
+            },
+            output : {
+                comments : false,
+            },
+        }));
     }
-    let loaders = module.exports.module.loaders;
-    loaders[3].loaders = ['css', 'autoprefixer'];
-    loaders[4].loaders = ['css', 'autoprefixer', 'sass'];
-    loaders[3].loader = loaders[4].loader = void 0;
-    module.exports.output = {
-        path : './dist/',
-        filename : `[name]${ process.argv.uglify ? '.min' : '' }.js`,
-        library : process.argv.library,
-        libraryTarget : process.argv.libraryTarget,
-    };
+} else {
+    config.plugins.unshift(new webpack.optimize.UglifyJsPlugin({
+        compress : {
+            warnings : false,
+        },
+        output : {
+            comments : false,
+        },
+    }));
+    config.plugins.push(new ExtractTextWebpackPlugin('../css/[name].css'));
+    fs.readdirSync(sourcePath).forEach(( filename ) => {
+        if (/\.(html|appcache)$/.test(filename)) {
+            config.plugins.push(new HtmlWebpackPlugin({
+                minify : false,
+                inject : false,
+                filename : path.join('..', filename),
+                template : path.join(sourcePath, filename),
+            }));
+        }
+    });
+    let result = [];
+    Object.keys(constant).forEach(( key ) => {
+        result.push({
+            pattern : `@${ key }`,
+            replacement : constant[key],
+        });
+    });
+    config.plugins.push(new HtmlReplaceWebpackPlugin(result));
+    // config.plugins.push(new HtmlWebpackInlineSourcePlugin());
 }
+
+module.exports = config;

webpack/webpack.demo.js

@@ -7,29 +7,23 @@ 'use strict';
 let webpack = require('webpack');
-let ExtractText = require('extract-text-webpack-plugin');
+let autoprefixer = require('autoprefixer');
+let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
 
-const aliasPath = path.join(__dirname, '../src/entry');
-
-let alias = {};
-fs.readdirSync(aliasPath).forEach(( filename ) => {
-    let file = path.join(aliasPath, filename);
-    if (fs.statSync(file).isFile() && path.extname(file) == '.js') {
-        alias[path.basename(filename, '.js')] = file;
-    }
-});
-
-let proxy = {
-    '/dist' : {
-        target : `http://localhost:${ yargs.argv.port + 1 }/`,
-        changeOrigin : true,
-        pathRewrite : {
-            '^/dist' : ''
-        },
-    },
-};
-
 const entry = require('./webpack.entry.json');
+const packageJson = require('../package.json');
 
+const alias = (() => {
+    const aliasPath = path.join(__dirname, '../src/entry');
+    let alias = {};
+    fs.readdirSync(aliasPath).forEach(( filename ) => {
+        let file = path.join(aliasPath, filename);
+        if (fs.statSync(file).isFile() && path.extname(file) == '.js') {
+            alias[path.basename(filename, '.js')] = file;
+        }
+    });
+    return alias;
+})();
 const imageSize = 10240;
+const constant = {};
 
-module.exports = {
+let config = {
     devtool : '#source-map',
@@ -41,3 +35,3 @@ entry,
     },
-    extensions : ['.vue', '.js', '.json', '.scss', '.html'],
+    extensions : ['.vue', '.js', '.json', '.scss'],
     resolve : {
@@ -53,6 +47,2 @@ alias,
             {
-                test : /\.html$/,
-                loader : 'vue-html',
-            },
-            {
                 test : /\.(png|jpg|gif|svg)$/,
@@ -63,7 +53,7 @@ loader : `url?limit=${ imageSize }&name=../img/[name].[ext]?[hash]`,
                 test : /\.css$/,
-                loader : ExtractText.extract('style', 'css'),
+                loader : ExtractTextWebpackPlugin.extract('style', 'css!postcss'),
             },
             {
                 test : /\.scss$/,
-                loader : ExtractText.extract('style', 'css?localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass'),
+                loader : ExtractTextWebpackPlugin.extract('style', 'css!postcss!sass'),
             },
@@ -83,13 +73,34 @@ {
     plugins : [
-        new ExtractText('[name].css'),
+        new ExtractTextWebpackPlugin('[name].css'),
+        new webpack.DefinePlugin((() => {
+            Object.keys(constant).forEach(( key ) => {
+                constant[key] = JSON.stringify(constant[key]);
+            });
+            return {
+                'process.env' : constant,
+            };
+        })()),
     ],
     vue : {
         loaders : {
-            sass : ExtractText.extract('style', 'css!autoprefixer?browsers=last 2 version!sass?indentedSyntax'),
-            scss : ExtractText.extract('style', 'css!autoprefixer?browsers=last 2 version!sass'),
+            sass : ExtractTextWebpackPlugin.extract('style', 'css!postcss!sass'),
+            scss : ExtractTextWebpackPlugin.extract('style', 'css!postcss!sass'),
         },
     },
+    postcss () {
+        return [autoprefixer({ browsers : ['last 2 versions'] })];
+    },
     devServer : {
-        proxy,
+        proxy : {
+            '/dist' : {
+                target : `http://localhost:${ yargs.argv.port + 1 }/`,
+                changeOrigin : true,
+                pathRewrite : {
+                    '^/dist' : ''
+                },
+            },
+        },
     },
 };
+
+module.exports = config;

webpack/webpack.dev.js

@@ -5,10 +5,16 @@ 'use strict';
 let webpack = require('webpack');
-let ExtractText = require('extract-text-webpack-plugin');
+let autoprefixer = require('autoprefixer');
+let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
 
-const alias = {};
 const entry = require('./webpack.entry.json');
+const packageJson = require('../package.json');
 
+const alias = {};
 const imageSize = 10240;
+const constant = {
+    NAME : packageJson.name,
+    VERSION : packageJson.version,
+};
 
-module.exports = {
+let config = {
     devtool : '#source-map',
@@ -20,3 +26,3 @@ entry,
     },
-    extensions : ['.vue', '.js', '.json', '.scss', '.html'],
+    extensions : ['.vue', '.js', '.json', '.scss'],
     resolve : {
@@ -32,6 +38,2 @@ alias,
             {
-                test : /\.html$/,
-                loader : 'vue-html',
-            },
-            {
                 test : /\.(png|jpg|gif|svg)$/,
@@ -42,7 +44,7 @@ loader : `url?limit=${ imageSize }&name=../img/[name].[ext]?[hash]`,
                 test : /\.css$/,
-                loader : ExtractText.extract('style', 'css'),
+                loader : ExtractTextWebpackPlugin.extract('style', 'css!postcss'),
             },
             {
                 test : /\.scss$/,
-                loader : ExtractText.extract('style', 'css?localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass'),
+                loader : ExtractTextWebpackPlugin.extract('style', 'css!postcss!sass'),
             },
@@ -62,10 +64,23 @@ {
     plugins : [
-        new ExtractText('css/[name].css'),
+        new ExtractTextWebpackPlugin('css/[name].css'),
+        new webpack.DefinePlugin((() => {
+            Object.keys(constant).forEach(( key ) => {
+                constant[key] = JSON.stringify(constant[key]);
+            });
+            return {
+                'process.env' : constant,
+            };
+        })()),
     ],
     vue : {
         loaders : {
-            sass : ExtractText.extract('style', 'css!autoprefixer?browsers=last 2 version!sass?indentedSyntax'),
-            scss : ExtractText.extract('style', 'css!autoprefixer?browsers=last 2 version!sass'),
+            sass : ExtractTextWebpackPlugin.extract('style', 'css!postcss!sass'),
+            scss : ExtractTextWebpackPlugin.extract('style', 'css!postcss!sass'),
         },
     },
+    postcss () {
+        return [autoprefixer({ browsers : ['last 2 versions'] })];
+    },
 };
+
+module.exports = config;

webpack/webpack.node.js

@@ -8,6 +8,7 @@ 'use strict';
 let colors = require('colors');
-let inline = require('inline-source').sync;
 let inquirer = require('inquirer');
 
 const port = 8080;
+const task = process.argv[2].substring(1);
+const buildjs = process.argv[3] == 'js';
 const sourcePath = path.join(__dirname, '../src');
@@ -17,23 +18,21 @@ const outputPath = path.join(__dirname, '../dist');
 
-let cmd;
-
 let start = () => {
-    let task = process.argv[2].substring(1);
     if (task == 'dev') {
-        cmd = `webpack-dev-server --inline --quiet --devtool eval --progress --colors --content-base ./src/ --hot --config ./webpack/webpack.dev.js --host 0.0.0.0 --port ${ port }`;
-        step3().then(step4).catch(reboot);
+        step3().then(() => {
+            return `webpack-dev-server --inline --quiet --devtool eval --progress --colors --content-base ./src/ --hot --config ./webpack/webpack.dev.js --host 0.0.0.0 --port ${ port }`;
+        }).then(step4).catch(reboot);
     }
     if (task == 'build') {
-        let base = 'webpack --progress --colors --config ./webpack/webpack.build.js';
-        if (process.argv[3] && process.argv[3] == 'js') {
-            let rollupFile;
-            step3().then(step7).then(step11).then(( filepath ) => {
-                return rollupFile = filepath;
-            }).then(step8).then(( option ) => {
-                cmd = base + option;
-            }).then(step1).then(step4).then(() => {
-                cmd += ' --uglify';
+        if (buildjs) {
+            step3().then(step6).then(step10).then(( filepath ) => {
+                return step7(filepath).then(( option ) => {
+                    return step1().then(() => {
+                        return `webpack --progress --colors --config ./webpack/webpack.build.js${ option }`;
+                    });
+                }).then(step4).then(( cmd ) => {
+                    return `${ cmd } --uglify`;
+                }).then(step4).then(() => {
+                    return `rm ${ filepath }`;
+                });
             }).then(step4).then(() => {
-                cmd = `rm ${ rollupFile }`;
-            }).then(step4).then(() => {
                 console.log('build complete!'.green);
@@ -44,3 +43,5 @@ }).catch((err) => {
         } else {
-            step1().then(step2).then(step3).then(step4).then(step5).then(() => {
+            step1().then(step2).then(step3).then(() => {
+                return `webpack --progress --colors --config ./webpack/webpack.build.js`;
+            }).then(step4).then(() => {
                 console.log('build complete!'.green);
@@ -53,5 +54,6 @@ }).catch(( err ) => {
     if (task == 'demo') {
-        cmd = `webpack-dev-server --content-base ./dist/ --host 0.0.0.0 --port ${ port + 1 }`;
-        step9().then(step10).then(() => {
-            cmd = `webpack-dev-server --inline --quiet --devtool eval --progress --colors --content-base ./demo/ --hot --config ./webpack/webpack.demo.js --host 0.0.0.0 --port ${ port }`;
+        step8().then(() => {
+            return `webpack-dev-server --content-base ./dist/ --host 0.0.0.0 --port ${ port + 1 }`;
+        }).then(step9).then(() => {
+            return `webpack-dev-server --inline --quiet --devtool eval --progress --colors --content-base ./demo/ --hot --config ./webpack/webpack.demo.js --host 0.0.0.0 --port ${ port }`;
         }).then(step4).catch(reboot);
@@ -62,4 +64,5 @@ }
             console.log(`\n${ port } is aleary in use. Ctrl+C to leave or input a PID to kill：`.green);
-            cmd = `lsof -i tcp:${ port }`;
-            step4().then(step6).then(( pid ) => cmd = `kill ${ pid }`).then(step4).catch(( err ) => {
+            Promise.resolve(`lsof -i tcp:${ port }`).then(step4).then(step5).then(( pid ) => {
+                return `kill ${ pid }`;
+            }).then(step4).catch(( err ) => {
                 console.log(err.toString().red);
@@ -105,2 +108,5 @@ }).then(start);
             }
+            if (fs.statSync(file).isFile() && (path.extname(file) == '.html' || path.extname(file) == '.appcache')) {
+                return;
+            }
             fse.copySync(file, path.join(outputPath, filename));
@@ -144,6 +150,6 @@ });
  */
-let step4 = () => new Promise(( resolve, reject ) => {
+let step4 = ( cmd ) => new Promise(( resolve, reject ) => {
     let result = shell.exec(cmd);
     if (result.code === 0) {
-        resolve();
+        resolve(cmd);
     } else {
@@ -155,51 +161,6 @@ reject(result.stderr);
 /**
- * [step5] inline -- According to `inline` attribute and replace the code of file
- * @return {Promise} inline_success
+ * [step5] inquirer.prompt -- Get PID
+ * @return {Promise} get_pid_success
  */
 let step5 = () => new Promise(( resolve, reject ) => {
-    fs.readdir(outputPath, ( err, files ) => {
-        if (err) {
-            reject(err);
-            return;
-        };
-        files.forEach(( filename ) => {
-            let file = path.join(outputPath, filename);
-            if (fs.statSync(file).isFile() && path.extname(file) == '.html') {
-                let html = inline(file, {
-                    compress : false,
-                    rootpath : path.resolve('dist'),
-                    handlers ( source, context ) {
-                        if (source && source.fileContent && !source.content) {
-                            if (source.extension == 'css') {
-                                source.tag = 'style';
-                                source.content = source.fileContent.replace(/url\(.*?\)/g, function ( match ) {
-                                    let url = match.substring(0, match.length - 1).substring(4);
-                                    if (/^http(s?):\/\/|data:image/.test(url)) {
-                                        return match;
-                                    } else {
-                                        if (url.indexOf('?')) {
-                                            url = url.split('?')[0];
-                                        }
-                                        return `url(${ path.join('dist', url) })`;
-                                    }
-                                });
-                            }
-                            if (source.extension == 'js') {
-                                source.content = source.fileContent.trim();
-                            }
-                        }
-                    },
-                });
-                fs.writeFileSync(file, html);
-            }
-        });
-        resolve();
-    });
-});
-
-/**
- * [step6] inquirer.prompt -- Get PID
- * @return {Promise} get_pid_success
- */
-let step6 = () => new Promise(( resolve, reject ) => {
     inquirer.prompt([{
@@ -217,6 +178,6 @@ type : 'input',
 /**
- * [step7] inquirer.prompt -- Get js file
+ * [step6] inquirer.prompt -- Get js file
  * @return {Promise} get_js_success
  */
-let step7 = ( entry ) => new Promise(( resolve, reject ) => {
+let step6 = ( entry ) => new Promise(( resolve, reject ) => {
     let choices = Object.keys(entry);
@@ -252,6 +213,6 @@ if (choices.length) {
 /**
- * [step8] fs.readFile -- Get js webpack config
+ * [step7] fs.readFile -- Get js webpack config
  * @return {Promise} get_config_success
  */
-let step8 = ( filepath ) => new Promise(( resolve, reject ) => {
+let step7 = ( filepath ) => new Promise(( resolve, reject ) => {
     fs.readFile(filepath, (err, buffer) => {
@@ -280,6 +241,6 @@ if (err) {
 /**
- * [step9] fse.outputJson -- Create `webpack.entry.json` dynamically
+ * [step8] fse.outputJson -- Create `webpack.entry.json` dynamically
  * @return {Promise} create_entry_success
  */
-let step9 = () => new Promise(( resolve, reject ) => {
+let step8 = () => new Promise(( resolve, reject ) => {
     let entry = {};
@@ -311,21 +272,20 @@ fs.readdir(demoPath, ( err, files ) => {
 /**
- * [step10] shell.exec -- Create child process
+ * [step9] shell.exec -- Create child process
  * @return {Promise} create_child_process_success
  */
-let step10 = () => new Promise(( resolve ) => {
+let step9 = ( cmd ) => new Promise(( resolve ) => {
     if (fs.existsSync(outputPath)) {
         shell.exec(cmd, { async : true });
     }
-    resolve();
+    resolve(cmd);
 });
 
 /**
- * [step11] Rollup
+ * [step10] Rollup
  * @return {Promise} rollup_success
  */
-let step11 = ( filepath ) => new Promise(( resolve, reject ) => {
+let step10 = ( filepath ) => new Promise(( resolve, reject ) => {
     let src = filepath;
     let dist = path.join(src, '../', path.basename(src, '.js') + '.rollup.js');
-    cmd = `rollup ${ src } -o ${ dist }`;
-    step4().then(() => {
+    step4(`rollup ${ src } -o ${ dist }`).then(() => {
         console.log('rollup complete!'.green);
@@ -332,0 +292,0 @@ let entry = {};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

992072

increased by0.01%

Worsened metrics

Dev dependency count

38

increased by8.57%

Number of package files

81

decreased by-1.22%

Number of low supply chain risk alerts

5

increased by25%

No dependency changes