From 294b2b47ece6d5ba8cdb2977b8276c1367a1243c Mon Sep 17 00:00:00 2001 From: Tiberiu Corbu Date: Tue, 10 Oct 2017 11:44:13 +0200 Subject: [PATCH 1/2] Add example subproject --- .gitignore | 4 +++- example/README.md | 38 ++++++++++++++++++++++++++++++++++++++ example/assets/index.html | 10 ++++++++++ example/entry.js | 28 ++++++++++++++++++++++++++++ example/package.json | 32 ++++++++++++++++++++++++++++++++ example/script.exec.js | 25 +++++++++++++++++++++++++ example/webpack.config.js | 16 ++++++++++++++++ 7 files changed, 152 insertions(+), 1 deletion(-) create mode 100644 example/README.md create mode 100644 example/assets/index.html create mode 100644 example/entry.js create mode 100644 example/package.json create mode 100644 example/script.exec.js create mode 100644 example/webpack.config.js diff --git a/.gitignore b/.gitignore index b512c09..6f8120d 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ -node_modules \ No newline at end of file +node_modules +example/dist +example/node_modules \ No newline at end of file diff --git a/example/README.md b/example/README.md new file mode 100644 index 0000000..cd4a5b9 --- /dev/null +++ b/example/README.md @@ -0,0 +1,38 @@ +#Script loader Example + +This example demonstrates how to configure and how the script-loader behaves. + +## Run + +To run the example clone this repo and navigate to the `example` directory, than install the `example` dependencies and run webpack with + +``` cli +npm i +npm start +``` + +Than open a browser to http://localhost:8080/assets/ + +You will notice an output from the two scripts now packed in the `example/dist/index.js` bundle: + +``` +List of the script.exec.js fields : +this fields : + - this[postMessage] = function + - this[blur] = function + - this[focus] = function + - this[close] = function + .... +arguments fields : + Nothing to show here + +List of the entry.js fields : +this fields : + Nothing to show here +arguments fields : + arguments[[object Object]] = object + arguments[[object Object]] = object +``` + +Also the code inside `script.exec.js` was executed without calling or using exec into the `entry.js` + diff --git a/example/assets/index.html b/example/assets/index.html new file mode 100644 index 0000000..2e80187 --- /dev/null +++ b/example/assets/index.html @@ -0,0 +1,10 @@ + + + + + Script loader example + + + + + \ No newline at end of file diff --git a/example/entry.js b/example/entry.js new file mode 100644 index 0000000..3fd7001 --- /dev/null +++ b/example/entry.js @@ -0,0 +1,28 @@ +import exec from './script.exec.js'; + +// List variables +var buffer = 'List of the entry.js fields : \n'; + +buffer += 'this fields : \n'; +var hasFieldsInThis = false; +for (var name in this) { + hasFieldsInThis = true; + buffer += '\t- this[' + name + '] = ' + typeof this[name] + '\n'; +} +if (!hasFieldsInThis) { + buffer += '\tNothing to show here<\em>\n'; +} + +buffer += 'arguments fields : \n'; +if (typeof arguments !== 'undefined') { + for (var x of arguments) { + buffer += '\targuments[' + x + '] = ' + typeof x + '\n'; + } +} else { + buffer += '\tNothing to show here\n'; +} + + +var pre = document.createElement('pre'); +pre.innerHTML = buffer; +document.body.appendChild(pre); \ No newline at end of file diff --git a/example/package.json b/example/package.json new file mode 100644 index 0000000..f650ff6 --- /dev/null +++ b/example/package.json @@ -0,0 +1,32 @@ +{ + "name": "script-loader-example", + "version": "0.0.1", + "author": "Tiberiu CORBU @tiberiucorbu", + "description": "Showcase the use of script-loader", + "license": "MIT", + "main": "dist/index.js", + "files": [ + "dist" + ], + "scripts": { + "start": "webpack && webpack-dev-server" + }, + "dependencies": {}, + "devDependencies": { + "script-loader": "../", + "webpack": "^3.1.0", + "webpack-dev-server": "^2.9.1" + }, + "homepage": "http://github.com/webpack-contrib/extract-text-webpack-plugin", + "repository": { + "type": "git", + "url": "https://github.com/webpack-contrib/script-loader.git" + }, + "pre-commit": "lint-staged", + "lint-staged": { + "*.js": [ + "eslint --fix", + "git add" + ] + } +} diff --git a/example/script.exec.js b/example/script.exec.js new file mode 100644 index 0000000..db1648b --- /dev/null +++ b/example/script.exec.js @@ -0,0 +1,25 @@ +var buffer = 'List of the script.exec.js fields : \n'; + +buffer += 'this fields : \n'; +var hasFieldsInThis = false; +for (var name in this) { + hasFieldsInThis = true; + buffer += '\t- this[' + name + '] = ' + typeof this[name] + '\n'; +} +if (!hasFieldsInThis) { + buffer += '\tNothing to show here<\em>\n'; +} + +buffer += 'arguments fields : \n'; +if (typeof arguments !== 'undefined') { + for (var x of arguments) { + buffer += '\targuments[' + x + '] = ' + typeof x + '\n'; + } +} else { + buffer += '\tNothing to show here\n'; +} + + +var pre = document.createElement('pre'); +pre.innerHTML = buffer; +document.body.appendChild(pre); \ No newline at end of file diff --git a/example/webpack.config.js b/example/webpack.config.js new file mode 100644 index 0000000..d1cbcd0 --- /dev/null +++ b/example/webpack.config.js @@ -0,0 +1,16 @@ +module.exports = { + entry: { + index: "./entry.js", + }, + output: { + filename: "[name].js?[hash]", + chunkFilename: "[name].js?[hash]-[chunkhash]", + path: __dirname + "/dist" + }, + module: { + loaders: [ + { test: /exec\.js$/, loader: "script-loader" } + ] + }, + devtool: "source-map" +}; \ No newline at end of file From 0677bd77fefb213da2f4e683165778a7b3e5c580 Mon Sep 17 00:00:00 2001 From: Tiberiu Corbu Date: Tue, 10 Oct 2017 11:58:41 +0200 Subject: [PATCH 2/2] Improve README.md and example/README.md --- README.md | 7 +++++++ example/README.md | 13 ++++++------- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 4d64af4..4babdd5 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,9 @@ npm install --save-dev script-loader Executes JS script once in global context. +It converts the script into a plain string, and upon runtime, the exported string is passed to `window.eval` or `window.executeScript` depending on the browser. +Doing so, the code loaded with this loader is ran on the topmost scope. + > :warning: Doesn't work in NodeJS ### Config (recommended) @@ -49,6 +52,10 @@ module.exports = { import exec from 'script-loader!./script.js'; ``` +### Example + +Take a look at the example provided in the [./example](example) folder +

Maintainers

diff --git a/example/README.md b/example/README.md index cd4a5b9..73f5786 100644 --- a/example/README.md +++ b/example/README.md @@ -1,19 +1,19 @@ -#Script loader Example +# Script loader example -This example demonstrates how to configure and how the script-loader behaves. +This example demonstrates how to configure and how `script-loader` behaves. ## Run -To run the example clone this repo and navigate to the `example` directory, than install the `example` dependencies and run webpack with +To run install the `example` dependencies and run webpack with: ``` cli npm i npm start ``` -Than open a browser to http://localhost:8080/assets/ +Than open a browser and point it to: http://localhost:8080/assets/ -You will notice an output from the two scripts now packed in the `example/dist/index.js` bundle: +You will notice an output from the two scripts now packed into `example/dist/index.js` bundle: ``` List of the script.exec.js fields : @@ -34,5 +34,4 @@ arguments fields : arguments[[object Object]] = object ``` -Also the code inside `script.exec.js` was executed without calling or using exec into the `entry.js` - +Also note that code inside `script.exec.js` was executed without calling or using `exec` into the `entry.js`