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/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 new file mode 100644 index 0000000..73f5786 --- /dev/null +++ b/example/README.md @@ -0,0 +1,37 @@ +# Script loader example + +This example demonstrates how to configure and how `script-loader` behaves. + +## Run + +To run install the `example` dependencies and run webpack with: + +``` cli +npm i +npm start +``` + +Than open a browser and point it to: http://localhost:8080/assets/ + +You will notice an output from the two scripts now packed into `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 note that 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