🔧 add umd build for graphin

antvis · Jan 7, 2020 · 2726fa6 · 2726fa6
1 parent 29b58d8
commit 2726fa6
Show file tree

Hide file tree

Showing 4 changed files with 149 additions and 45 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,42 +1,43 @@
 module.exports = {
-    parser: '@typescript-eslint/parser', // Specifies the ESLint parser
-    extends: [
-        'airbnb',
-        'plugin:@typescript-eslint/eslint-recommended',
-        'plugin:@typescript-eslint/recommended',
-        'prettier',
-        'prettier/react',
-        'prettier/@typescript-eslint',
-    ],
-    parserOptions: {
-        ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
-        sourceType: 'module', // Allows for the use of imports
-        ecmaFeatures: {
-            jsx: true, // Allows for the parsing of JSX
-        },
-    },
-    rules: {
-        'import/no-unresolved': 0,
-        'no-console': ['error', { allow: ['warn', 'error'] }],
-        'react/prop-types': 'off',
-        '@typescript-eslint/explicit-function-return-type': 'off',
-        '@typescript-eslint/no-explicit-any': 'error',
-        'react/display-name': 'off',
-        'react/jsx-filename-extension': [1, { extensions: ['.jsx', '.tsx', '.js', '.ts'] }],
-        'react/jsx-props-no-spreading': 0,
-        'operator-assignment': 0,
-        'react/no-did-update-set-state': 0,
-        'consistent-return': 0,
-        'react/sort-comp': 0,
-        'no-plusplus': 'off', // i++
-        radix: 'off', // parseInt Missing radix parameter
-        'no-restricted-properties': 'off', // Math.pow(10, 2) === 10**2
-        'import/order': 0,
-        '@typescript-eslint/explicit-member-accessibility': 0,
-        '@typescript-eslint/no-non-null-assertion': 0,
-        'no-param-reassign': 0,
-        '@typescript-eslint/no-object-literal-type-assertion': 0,
-        'no-empty-function': 'off',
-        '@typescript-eslint/no-empty-function': 'off',
+  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
+  extends: [
+    'airbnb',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'prettier/react',
+    'prettier/@typescript-eslint',
+  ],
+  parserOptions: {
+    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+    ecmaFeatures: {
+      jsx: true, // Allows for the parsing of JSX
     },
+  },
+  rules: {
+    'import/extensions': 0,
+    'import/no-unresolved': 0,
+    'no-console': ['error', { allow: ['warn', 'error'] }],
+    'react/prop-types': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-explicit-any': 'error',
+    'react/display-name': 'off',
+    'react/jsx-filename-extension': [1, { extensions: ['.jsx', '.tsx', '.js', '.ts'] }],
+    'react/jsx-props-no-spreading': 0,
+    'operator-assignment': 0,
+    'react/no-did-update-set-state': 0,
+    'consistent-return': 0,
+    'react/sort-comp': 0,
+    'no-plusplus': 'off', // i++
+    radix: 'off', // parseInt Missing radix parameter
+    'no-restricted-properties': 'off', // Math.pow(10, 2) === 10**2
+    'import/order': 0,
+    '@typescript-eslint/explicit-member-accessibility': 0,
+    '@typescript-eslint/no-non-null-assertion': 0,
+    'no-param-reassign': 0,
+    '@typescript-eslint/no-object-literal-type-assertion': 0,
+    'no-empty-function': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+  },
 };
diff --git a/packages/graphin/.fatherrc.js b/packages/graphin/.fatherrc.js
@@ -1,5 +1,5 @@
 export default {
-    esm: { type: 'rollup', file: 'index', importLibToEs: true },
-    lessInRollupMode: {},
-    extractCSS: true,
+  esm: { type: 'rollup', file: 'index', importLibToEs: true },
+  lessInRollupMode: {},
+  extractCSS: true,
 };
diff --git a/packages/graphin/package.json b/packages/graphin/package.json
@@ -6,7 +6,8 @@
   "types": "./dist/index.d",
   "scripts": {
     "start": "father build --watch",
-    "build": "father build",
+    "build": "father build && npm run build:umd",
+    "build:umd": "node --max_old_space_size=8192 ./node_modules/webpack/bin/webpack.js  --env.NODE_ENV=production  -c ./webpack.config.js ",
     "test": "jest",
     "prettier": "prettier --write ./src/**/**/**/*.js"
   },
@@ -25,12 +26,16 @@
     "jsdom-worker": "^0.1.0",
     "less": "^3.8.1",
     "less-loader": "^4.1.0",
+    "mini-css-extract-plugin": "^0.9.0",
     "prettier": "^1.18.2",
     "rimraf": "^2.6.2",
     "style-loader": "^0.23.1",
     "svg-inline-loader": "^0.8.0",
     "svg-path-parser": "^1.1.0",
-    "ts-jest": "^24.1.0"
+    "ts-jest": "^24.1.0",
+    "webpack": "^4.41.5",
+    "webpack-bundle-analyzer": "^3.6.0",
+    "webpack-cli": "^3.3.10"
   },
   "sideEffects": false,
   "author": "Ant Financial",
@@ -45,4 +50,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}
diff --git a/packages/graphin/webpack.config.js b/packages/graphin/webpack.config.js
@@ -0,0 +1,98 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+
+module.exports = env => {
+  return {
+    entry: {
+      bundle: './src/index.ts',
+    },
+    mode: env.NODE_ENV,
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          use: ['source-map-loader'],
+          enforce: 'pre',
+        },
+        {
+          test: /\.(js|jsx)$/,
+          exclude: /(node_modules|bower_components)/,
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/env', '@babel/preset-react'],
+            plugins: [['@babel/plugin-proposal-class-properties', { loose: true }], ['react-hot-loader/babel']],
+          },
+        },
+        {
+          test: /\.tsx?$/,
+          loader: 'ts-loader',
+          exclude: /node_modules/,
+          options: {
+            compilerOptions: {
+              declaration: false,
+            },
+          },
+        },
+        {
+          test: /\.css$/,
+          use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        },
+        {
+          test: /\.(png|jpe?g|gif|svg)$/i,
+          use: [
+            {
+              loader: 'file-loader',
+            },
+          ],
+        },
+        {
+          test: /\.less$/,
+          use: [
+            {
+              loader: MiniCssExtractPlugin.loader,
+            },
+            {
+              loader: 'css-loader', // translates CSS into CommonJS
+            },
+            {
+              loader: 'less-loader', // compiles Less to CSS
+              options: {
+                javascriptEnabled: true,
+              },
+            },
+          ],
+          sideEffects: true,
+        },
+        {
+          test: /\.(woff|woff2|eot|ttf|otf)$/,
+          use: ['file-loader'],
+        },
+      ],
+    },
+
+    resolve: {
+      extensions: ['*', '.ts', '.tsx', '.js', '.jsx'],
+    },
+    devtool: 'cheap-module-eval-source-map',
+    output: {
+      library: 'Graphin',
+      libraryTarget: 'umd',
+      path: path.resolve(__dirname, 'dist/'),
+      publicPath: './',
+      filename: 'graphin.min.js',
+    },
+    plugins: [
+      new MiniCssExtractPlugin(),
+      // new BundleAnalyzerPlugin()
+    ],
+    externals: [
+      {
+        lodash: '_',
+        react: 'window.React',
+        '@antv/g6': 'G6',
+      },
+    ],
+  };
+};