├── .gitignore ├── package.json ├── ext ├── ext-css.js └── ext-js.js ├── test └── demo.js ├── index.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | *.log 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-require-http", 3 | "version": "0.4.3", 4 | "description": "you can use the 'require' method to load http resource in webpack tool", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "node test/demo.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/darkty2009/webpack-require-http.git" 12 | }, 13 | "keywords": [ 14 | "webpack", 15 | "http", 16 | "load", 17 | "require", 18 | "plugin", 19 | "loader" 20 | ], 21 | "author": "darkty2009", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/darkty2009/webpack-require-http/issues" 25 | }, 26 | "homepage": "https://github.com/darkty2009/webpack-require-http#readme", 27 | "dependencies":{ 28 | "url":"^0.11.0", 29 | "md5":"^2.0.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /ext/ext-css.js: -------------------------------------------------------------------------------- 1 | module.exports = function(request, id) { 2 | return "\ 3 | var fun=function(resolve, reject){\ 4 | var link = document.createElement('link');\ 5 | link.type = 'text/css';\ 6 | link.rel = 'stylesheet';\ 7 | link.href = '"+request+"';\ 8 | link.id = '"+id+"';\ 9 | (document.head || document.body).appendChild(link);\ 10 | link.onload = function() {\ 11 | typeof resolve=='function' && resolve();\ 12 | };\ 13 | link.onerror = function() {\ 14 | typeof reject=='function' && reject();\ 15 | };\ 16 | };\ 17 | if(JQ){\ 18 | fun(resolve, reject);\ 19 | }else{\ 20 | promise = new Promise(function(resolve, reject) {\ 21 | fun(resolve, reject);\ 22 | });\ 23 | }\ 24 | "; 25 | }; -------------------------------------------------------------------------------- /ext/ext-js.js: -------------------------------------------------------------------------------- 1 | module.exports = function(request, id) { 2 | return "\ 3 | var fun=function(resolve, reject){\ 4 | var script = document.createElement('script');\ 5 | script.src = '"+request+"';\ 6 | script.id = '"+id+"';\ 7 | script.async = false;\ 8 | (document.head || document.body).appendChild(script);\ 9 | script.onload = function() {\ 10 | typeof resolve=='function' && resolve();\ 11 | };\ 12 | script.onerror = function() {\ 13 | typeof reject=='function' && reject();\ 14 | };\ 15 | };\ 16 | if(JQ){\ 17 | fun(resolve, reject);\ 18 | }else{\ 19 | promise = new Promise(function(resolve, reject) {\ 20 | fun(resolve, reject);\ 21 | });\ 22 | }\ 23 | "; 24 | }; -------------------------------------------------------------------------------- /test/demo.js: -------------------------------------------------------------------------------- 1 | var webpackRequireHttp = require('../index'); 2 | 3 | webpackRequireHttp('', 'http://5doe.com/custom/website.js', function(err, content) { 4 | console.log('TEST1', content); 5 | }); 6 | 7 | webpackRequireHttp('', 'ftp://5doe.com/custom/website.js', function(err, content) { 8 | console.log('TEST1', content); 9 | }); 10 | 11 | webpackRequireHttp('', 'ws://5doe.com/custom/iosocket.js', function(err, content) { 12 | console.log('TEST1', content); 13 | }); 14 | 15 | var custom3Function = webpackRequireHttp.custom({ 16 | rules:{ 17 | 'somethingelse':'something' 18 | } 19 | }); 20 | 21 | custom3Function('', '#api/system', function(err, content) { 22 | console.log('TEST4', content); 23 | }); 24 | 25 | var custom1Function = webpackRequireHttp.custom({ 26 | rules:{ 27 | '^#(.+)\/(.+)':'http://static.something.com/$1/$2.js' 28 | } 29 | }); 30 | 31 | custom1Function('', '#api/sdk', function(err, content) { 32 | console.log('TEST2', content); 33 | }); 34 | 35 | custom3Function('', '#api/system', function(err, content) { 36 | console.log('TEST4', content); 37 | }); 38 | 39 | var custom2Function = webpackRequireHttp.custom({ 40 | rules:function(context, request) { 41 | if(request && request.indexOf('//') == 0) { 42 | return 'http:' + request; 43 | } 44 | return request; 45 | } 46 | }); 47 | 48 | custom2Function('', '//something.com/index.js', function(err, content) { 49 | console.log('TEST3', content); 50 | }); 51 | 52 | webpackRequireHttp('', '>/direct/to/path.js', function(err, content) { 53 | console.log('TEST9', content); 54 | }); 55 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var url = require('url'); 2 | 3 | var protocols = [ 4 | 'http:', 5 | 'https:', 6 | 'ftp:', 7 | 'ftps:', 8 | 'ws:' 9 | ]; 10 | var extMap = { 11 | 'js':require('./ext/ext-js'), 12 | 'css':require('./ext/ext-css') 13 | }; 14 | 15 | var evalFunction = function(content) { 16 | return "(function() { "+content+"})()"; 17 | }; 18 | 19 | var existFunction = function(content, id) { 20 | return "\ 21 | var promise = null;\ 22 | var JQ='undefined'!=typeof jQuery;\ 23 | var dfd = JQ && jQuery.Deferred();\ 24 | var resolve = JQ && dfd.resolve;\ 25 | var reject = JQ && dfd.reject;\ 26 | if(document.getElementById('"+id+"')) {\ 27 | if(JQ){\ 28 | resolve();\ 29 | }else{\ 30 | promise = new Promise(function(resolve, reject) {\ 31 | resolve();\ 32 | });\ 33 | }\ 34 | }\ 35 | "+content+"\ 36 | \ 37 | return JQ ? dfd.promise() : Promise.all([promise]);\ 38 | "; 39 | }; 40 | 41 | var getExtContent = function(pathname, request, options) { 42 | var ext = pathname.split('.').pop(); 43 | if(options && options.ext) { 44 | ext = options.ext(pathname, request); 45 | } 46 | if(!extMap[ext]) { 47 | ext = 'js'; 48 | } 49 | var id = require('md5')(request); 50 | return evalFunction(existFunction(extMap[ext].call(null, request, id), id)); 51 | }; 52 | 53 | var defaultExports = function(context, request, callback, options) { 54 | var rules = options ? options.rules : null; 55 | if(request && rules) { 56 | if(typeof rules == 'function') { 57 | request = rules.call(null, context, request); 58 | } 59 | if(typeof rules == 'object') { 60 | Object.keys(rules).forEach(function(rule, index) { 61 | request = request.replace(new RegExp(rule, 'ig'), rules[rule]); 62 | }); 63 | } 64 | } 65 | 66 | if(request && request.indexOf('>') == 0) { 67 | request = request.substring(1); 68 | return callback(null, getExtContent(request, request, options)); 69 | }else { 70 | var result = url.parse(request); 71 | if(protocols.indexOf(result.protocol) > -1) { 72 | var pathname = result.pathname || ""; 73 | var content = getExtContent(pathname, request, options); 74 | return callback(null, content); 75 | } 76 | } 77 | 78 | return callback(); 79 | }; 80 | 81 | defaultExports.custom = function(option) { 82 | return function() { 83 | return defaultExports.apply(null, Array.prototype.slice.call(arguments).concat(option)); 84 | }; 85 | }; 86 | 87 | module.exports = defaultExports; 88 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # webpack-require-http 2 | 3 | you can use the 'require' method to load http resource in webpack 4 | 5 | ## install 6 | 7 | ```npm install webpack-require-http``` 8 | 9 | ## how to use 10 | 11 | in ```webpack.config.js```, you may be set the ```externals``` option like this: 12 | 13 | ``` 14 | { 15 | ... 16 | entry:{ 17 | ... 18 | }, 19 | output:{ 20 | ... 21 | }, 22 | externals:[ 23 | require('webpack-require-http') 24 | ] 25 | ... 26 | } 27 | ``` 28 | 29 | so, you can use it in your own code like: 30 | 31 | ``` 32 | require('http://codemirror.net/lib/codemirror.css'); 33 | require('http://codemirror.net/lib/codemirror.js'); 34 | require('http://codemirror.net/addon/edit/matchbrackets.js'); 35 | require('http://codemirror.net/addon/comment/continuecomment.js'); 36 | require('http://codemirror.net/addon/comment/comment.js'); 37 | require('http://codemirror.net/mode/javascript/javascript.js'); 38 | ``` 39 | 40 | those ```require``` method will return a ```Promise``` object 41 | 42 | you can use ```then``` method to wait the resource load complete. 43 | 44 | ``` 45 | Promise.all([ 46 | require('http://codemirror.net/lib/codemirror.css'), 47 | require('http://codemirror.net/lib/codemirror.js'), 48 | require('http://codemirror.net/addon/edit/matchbrackets.js'), 49 | require('http://codemirror.net/addon/comment/continuecomment.js'), 50 | require('http://codemirror.net/addon/comment/comment.js'), 51 | require('http://codemirror.net/mode/javascript/javascript.js') 52 | ]).then(function() { 53 | console.log(CodeMirror); 54 | }); 55 | ``` 56 | 57 | ## config rule 58 | 59 | in ```0.4.0```, you can use some rules to parse request, such as adjust ```http:|https:``` 60 | 61 | ``` 62 | { 63 | ... 64 | entry:{ 65 | ... 66 | }, 67 | output:{ 68 | ... 69 | }, 70 | externals:[ 71 | require('webpack-require-http').custom({ 72 | rules:{ 73 | '^#api\/common':'http://static.domain.com/api/common.js' 74 | } 75 | }) 76 | ] 77 | ... 78 | } 79 | ``` 80 | 81 | ### using rules 82 | 83 | ``` 84 | custom({ 85 | rules:{ 86 | 'some regexp' : 'replace result' 87 | } 88 | }) 89 | 90 | custom({ 91 | rules:function(filepath, request) { 92 | return request; 93 | } 94 | }); 95 | ``` 96 | 97 | ## demo 98 | 99 | ``` 100 | var webpackRequireHttp = require('webpack-require-http'); 101 | 102 | var custom1Function = webpackRequireHttp.custom({ 103 | rules:{ 104 | '^#(.+)\/(.+)':'http://static.something.com/$1/$2.js' 105 | } 106 | }); 107 | 108 | custom1Function('', '#api/sdk', function(err, content) { 109 | console.log('TEST2', content); // script, src=http://static.something.com/api/sdk.js 110 | }); 111 | 112 | var custom2Function = webpackRequireHttp.custom({ 113 | rules:function(context, request) { 114 | if(request && request.indexOf('//') == 0) { 115 | return 'http:' + request; 116 | } 117 | return request; 118 | } 119 | }); 120 | 121 | custom2Function('', '//something.com/index.js', function(err, content) { 122 | console.log('TEST3', content); // script, src=http://something.com/index.js 123 | }); 124 | ``` 125 | 126 | ## logs 127 | 128 | 0.4.3 add special char to ignore valid url check. 129 | --------------------------------------------------------------------------------