Match-id-87622cf11c2fc67c3916642abf1f1eb08b10dae6

2022-03-22 19:54:51 +08:00 · 2022-03-22 19:54:51 +08:00 · 8a86d83faf
parent 1085c400a3
commit 8a86d83faf
4 changed files with 119 additions and 0 deletions
--- a/libs/extension/src/panel/App.tsx
+++ b/libs/extension/src/panel/App.tsx
--- a/libs/extension/src/panel/index.tsx
+++ b/libs/extension/src/panel/index.tsx
@ -0,0 +1,7 @@
+import {render} from 'horizon';
+import App from './App';
+
+render(
+    <App />,
+  document.getElementById('root')
+);
--- a/libs/extension/src/panel/panel.html
+++ b/libs/extension/src/panel/panel.html
@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf8">
+        <script src='horizon.production.js'></script>
+        <style>
+          html {
+              display: flex;
+          }
+          body {
+              margin: 0;
+              padding: 0;
+              flex: 1;
+              display: flex;
+          }
+      </style>
+    </head>
+    <body>
+
+        <div id="root"></div>
+    </body>
+</html>
--- a/libs/extension/webpack.dev.js
+++ b/libs/extension/webpack.dev.js
@ -0,0 +1,55 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+// 用于 panel 页面开发
+
+module.exports = {
+  mode: 'development',
+  entry: {
+    panel: path.join(__dirname, './src/panel/index.tsx'),
+  },
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].js'
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js']
+  },
+  module: {
+    rules: [{
+      test: /\.tsx?$/,
+      exclude: /node_modules/,
+      use: [
+        {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', 
+            '@babel/preset-typescript',
+            ['@babel/preset-react', {
+              runtime: 'classic',
+              "pragma": "Horizon.createElement",
+              "pragmaFrag": "Horizon.Fragment", 
+            }]],
+          }
+        }
+      ]
+    }]
+  },
+  externals: {
+    'horizon': 'Horizon',
+  },
+  devServer: {
+    static: {
+      directory: path.join(__dirname, 'dist'),
+    },
+    open: 'panel.html',
+    port: 9000,
+    magicHtml: true,
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      filename: 'panel.html',
+      template: './src/panel/panel.html'
+    }),
+  ],
+};