core: add example using jQuery with es6 and expose-loader, add docu…

…mentation for using `expose-loader`

fixes #34

README.md

@@ -79,6 +79,11 @@ be customized (see [Options Reference](#options-reference) below)
 
 * Vue
   * Replace `'vue-loader'` with `BabelMultiTargetPlugin.loader('vue-loader')`
+
+* `expose-loader`
+  * Rules using `expose-loader` must be defined _before_ rules using `BabelMultiTargetPlugin.loader()`
+  * Do not `import`/`require` libraries exposed with `expose-loader` - either reference them from the global scope,
+    or do not use `expose-loader`. You may also need to use Webpack's `ProvidePlugin`.
 
 ## Upgrading from v1.x
 

examples/es6-jquery/README.md

@@ -0,0 +1 @@
+# Example: ES6 (jQuery)

examples/es6-jquery/e2e-config.json

@@ -0,0 +1,4 @@
+{
+  "angular": false,
+  "e2e_ready": true
+}

examples/es6-jquery/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "webpack-babel-multi-target-plugin-example-es6-jquery",
+  "version": "0.0.0",
+  "dependencies": {
+    "jquery": "^3.4.1"
+  }
+}

examples/es6-jquery/src/commonjs-five.js

@@ -0,0 +1,3 @@
+const foo = () => console.log('commonjs 5')
+
+module.exports = foo

examples/es6-jquery/src/entry.js

@@ -0,0 +1,22 @@
+console.log('entry!')
+
+import { GTG } from '../../_shared/constants'
+import { createDom } from '../../_shared/es6-dom'
+import { makeItGreen } from '../../_shared/make.it.green'
+import { es6 } from '../../_shared/logos'
+import ready from '../../_shared/ready'
+
+require('./commonjs-five')
+
+Promise.all([])
+
+async function init() {
+  const dom = createDom('es6-jquery', es6)
+
+  makeItGreen()
+
+  dom.setStatus(GTG)
+  ready()
+}
+
+$(init)

examples/es6-jquery/src/four.js

@@ -0,0 +1 @@
+console.log('4')

examples/es6-jquery/src/one.js

@@ -0,0 +1 @@
+console.log('1')

examples/es6-jquery/src/three.js

@@ -0,0 +1 @@
+console.log('3')

examples/es6-jquery/src/two.js

@@ -0,0 +1 @@
+console.log('2')

examples/es6-jquery/webpack.config.js

@@ -0,0 +1,50 @@
+const { ProvidePlugin } = require('webpack')
+
+const BabelMultiTargetPlugin = require('../../').BabelMultiTargetPlugin
+
+/**
+ * @type {Configuration}
+ *
+ * this configuration is merged with ~/examples/webpack.common.js
+ **/
+module.exports = {
+
+  entry: {
+    'main': [
+      './src/one.js',
+      './src/two.js',
+      './src/three.js',
+      './src/four.js',
+      './src/entry.js',
+    ],
+  },
+
+  module: {
+    rules: [
+      {
+        test: /node_modules\/jquery/,
+        use: [
+          {
+            loader: 'expose-loader',
+            options: 'jQuery',
+          },
+          {
+            loader: 'expose-loader',
+            options: '$',
+          },
+        ],
+      },
+      {
+        test: /\.js$/,
+        use: BabelMultiTargetPlugin.loader(),
+      },
+    ],
+  },
+  plugins: [
+    new ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jQuery',
+    }),
+  ],
+
+}

package.json

@@ -109,6 +109,7 @@
     "eslint": "^5.12.0",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-mocha": "^5.2.0",
+    "expose-loader": "^0.7.5",
     "express": "^4.16.4",
     "express-history-api-fallback": "^2.2.1",
     "file-loader": "^3.0.1",

yarn.lock

@@ -3156,6 +3156,11 @@ expand-brackets@^2.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+expose-loader@^0.7.5:
+  version "0.7.5"
+  resolved "https://registry.npmjs.org/expose-loader/-/expose-loader-0.7.5.tgz#e29ea2d9aeeed3254a3faa1b35f502db9f9c3f6f"
+  integrity sha512-iPowgKUZkTPX5PznYsmifVj9Bob0w2wTHVkt/eYNPSzyebkUgIedmskf/kcfEIWpiWjg3JRjnW+a17XypySMuw==
+
 express-history-api-fallback@^2.2.1:
   version "2.2.1"
   resolved "https://registry.npmjs.org/express-history-api-fallback/-/express-history-api-fallback-2.2.1.tgz#3a2ad27f7bebc90fc533d110d7c6d83097bcd057"