Forráskód Böngészése

add README content

mightyplow 5 éve
szülő
commit
a1702d88f4
2 módosított fájl, 65 hozzáadás és 4 törlés
  1. 57 0
      README.md
  2. 8 4
      package.json

+ 57 - 0
README.md

@@ -0,0 +1,57 @@
+# @mightyplow/loadable-ssr
+
+This is a helper library to enable server side rendering when using [@loadable/component](https://www.npmjs.com/package/@loadable/component)
+for [React](https://www.npmjs.com/package/react) and building with [webpack](https://www.npmjs.com/package/webpack).
+
+This package contains two helpers:
+- a loader for transforming dynamic imports into require statements
+- a mock for @loadable/component which returns the imported module without being wrapped into a promise
+
+I successfully tested this with [babel-loader](https://www.npmjs.com/package/babel-loader) and 
+[ts-loader](https://www.npmjs.com/package/ts-loader).
+
+## Installation
+```
+npm i @mightyplow/loadable-ssr -D
+```
+
+## Configuring webpack
+Add these changes in the webpack config for your server application:
+```.js
+module.exports = {
+    ...
+    // You probably have externals defined to prevent webpack from building node_modules into
+    // your server application. Mostly webpack-node-externals is being used for this. You have
+    // to whitelist @loadable/component because otherwise the alias below won't work.
+    externals: [
+        require('webpack-node-externals')({
+            whitelist: [
+                '@loadable/component'
+            ]
+        })
+    ],
+    ...
+    resolve: {
+        alias: {
+            // replace @loadable/component with the mock
+            '@loadable/component': '@mightyplow/loadable-ssr/loadable-mock
+        }
+    },
+    ...
+    module: {
+        rules: [
+            {
+                test: /\.jsx?/,
+                loaders: [
+                    'babel-loader',
+                    
+                    // should be the last item in order to be executed first
+                    '@mightyplow/loadable-ssr/transform-dynamic-import-loader'
+                ]
+            }
+        ]
+    }
+    ...
+}
+```
+

+ 8 - 4
package.json

@@ -1,11 +1,8 @@
 {
   "name": "@mightyplow/loadable-ssr",
   "version": "1.0.0",
-  "description": "Helpers for enabling server side rendering with lazy components.",
+  "description": "Helpers for enabling server side rendering with @loadable/component.",
   "main": "./index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "keywords": [
     "lazy",
     "javascript",
@@ -14,6 +11,13 @@
     "ssr",
     "webpack"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.mightyplow.net/mightyplow/loadable-ssr"
+  },
+  "bugs": {
+    "url": "https://git.mightyplow.net/mightyplow/loadable-ssr/issues"
+  },
   "author": "mightyplow@gmail.com",
   "license": "Beerware"
 }