babel support runtime config, webpack build as library

module-package.json

@@ -1,8 +1,8 @@
 {
   "name": "dnde-mail-editor",
   "version": "v0.0.0-alpha.2",
-  "main": "./module/main.js",
-  "files": ["module/**/*" ],
+  "main": "./main.js",
+  "files": ["**/*"],
   "private": false,
   "dependencies": {
     "@ckeditor/ckeditor5-react": "^3.0.2",
@@ -21,20 +21,15 @@
     "mjml-browser": "^4.10.3",
     "mjml-cli": "^4.10.3",
     "quill": "^1.3.7",
-    "react": "^17.0.2",
     "react-color": "^2.19.3",
     "react-custom-scrollbars-2": "^4.4.0",
-    "react-dom": "^17.0.2",
     "react-redux": "^7.2.5",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
-    "react-scripts": "4.0.3",
     "sass": "^1.43.3",
     "styled-components": "^5.3.1",
-    "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
-  },
-  "scripts": {
-    "build:module": "webpack && npm pack"
+    "typescript": "^4.1.2"
   },
   "author": "https://github.com/aghontpi",
   "license": "GPL-3.0",

package.json

@@ -2,7 +2,9 @@
   "name": "dnde-mail-editor",
   "version": "v0.0.0-alpha.2",
   "main": "./module/main.js",
-  "files": ["module/**/*" ],
+  "files": [
+    "module/**/*"
+  ],
   "private": false,
   "dependencies": {
     "@ckeditor/ckeditor5-react": "^3.0.2",
@@ -39,7 +41,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "build:module": "webpack && npm pack"
+    "build:module": "webpack && cp module-package.json module/package.json && cp README.md module/README.md && npm pack ./module/"
   },
   "eslintConfig": {
     "extends": [

src/Package.ts

@@ -1,3 +1,3 @@
 import Editor from './Pages/Editor/';
 
-export { Editor as DndeEditor };
+export default Editor;

webpack.config.js

@@ -7,6 +7,8 @@ module.exports = (env, argv) => {
     output: {
       filename: 'main.js',
       path: path.resolve(__dirname, 'module'),
+      library: 'Editor',
+      libraryTarget: 'umd',
     },
     module: {
       rules: [
@@ -48,7 +50,11 @@ module.exports = (env, argv) => {
           use: {
             loader: 'babel-loader',
             options: {
-              presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
+              presets: [
+                '@babel/preset-env',
+                ['@babel/preset-react', { runtime: 'automatic' }],
+                '@babel/preset-typescript',
+              ],
             },
           },
         },