feat:修改viter打包配置,加入内置alias

ykfe · Jul 26, 2021 · 70d826c · 70d826c
1 parent 6d990c6
commit 70d826c
Show file tree

Hide file tree

Showing 20 changed files with 187 additions and 69 deletions.
diff --git a/packages/create-app/template-react-admin-ts/index.html b/packages/create-app/template-react-admin-ts/index.html
@@ -8,7 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    {# 入口路径，中后台项目非必要不修改 #}
-    <script type="module" src="./src/.viter/entry.tsx"></script>
+    <script type="module" src="./.viter/entry.tsx"></script>
   </body>
 </html>
diff --git a/packages/create-app/template-react-admin-ts/package.json b/packages/create-app/template-react-admin-ts/package.json
@@ -1,10 +1,10 @@
 {
-  "name": "viter-template",
+  "name": "viter-project",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite --config viter.config.ts",
-    "build": "tsc && vite build",
-    "serve": "vite preview"
+    "dev": "viter",
+    "build": "tsc && viter build",
+    "serve": "viter preview"
   },
   "dependencies": {
     "react": "^17.0.0",
@@ -15,7 +15,6 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@vitejs/plugin-react-refresh": "^1.3.1",
-    "typescript": "^4.1.2",
-    "vite": "^2.1.3"
+    "typescript": "^4.1.2"
   }
 }
diff --git a/packages/create-app/template-react-admin-ts/src/layout/index.tsx b/packages/create-app/template-react-admin-ts/src/layout/index.tsx
@@ -1,7 +1,12 @@
 import React from "react";
+import { Outlet } from "viter";
 
-function Layout(props) {
-  return <div>{props.children}</div>;
+function Layout() {
+  return (
+    <div style={{ backgroundColor: "GrayText", height: "400px" }}>
+      <Outlet></Outlet>
+    </div>
+  );
 }
 
 export default Layout;
diff --git a/packages/create-app/template-react-admin-ts/src/loading/index.tsx b/packages/create-app/template-react-admin-ts/src/loading/index.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React from "react";
 
 function Loading() {
-  return <div>Loading</div>;
+  return <div style={{ color: "#fff" }}>Loading</div>;
 }
 
 export default Loading;
diff --git a/packages/create-app/template-react-admin-ts/src/pages/About/index.tsx b/packages/create-app/template-react-admin-ts/src/pages/About/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+function About() {
+  return <div>about us</div>;
+}
+
+export default About;
diff --git a/packages/create-app/template-react-admin-ts/src/pages/Home/Home.module.css b/packages/create-app/template-react-admin-ts/src/pages/Home/Home.module.css
@@ -0,0 +1,42 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+button {
+  font-size: calc(10px + 2vmin);
+}
diff --git a/packages/create-app/template-react-admin-ts/src/pages/Home/index.tsx b/packages/create-app/template-react-admin-ts/src/pages/Home/index.tsx
@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import styles from "./Home.module.css";
+
+function Home() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="App">
+      <header className={styles["App-header"]}>
+        <p>Hello Viter + React!</p>
+        <p>
+          <button onClick={() => setCount((count) => count + 1)}>
+            count is: {count}
+          </button>
+        </p>
+        <p>
+          Edit <code>Home.tsx</code> and save to test HMR updates.
+        </p>
+        <p>
+          <a
+            className="App-link"
+            href="https://reactjs.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn React
+          </a>
+          {" | "}
+          <a
+            className="App-link"
+            href="https://vitejs.dev/guide/features.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Vite Docs
+          </a>
+        </p>
+      </header>
+    </div>
+  );
+}
+
+export default Home;
diff --git a/packages/create-app/template-react-admin-ts/src/pages/NotFind/index.tsx b/packages/create-app/template-react-admin-ts/src/pages/NotFind/index.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+function NotFind() {
+  return <div>404 NotFind</div>;
+}
+
+export default NotFind;
diff --git a/packages/create-app/template-react-admin-ts/src/pages/TestA/index.tsx b/packages/create-app/template-react-admin-ts/src/pages/TestA/index.tsx
diff --git a/packages/create-app/template-react-admin-ts/src/pages/TestB/index.tsx b/packages/create-app/template-react-admin-ts/src/pages/TestB/index.tsx
diff --git a/packages/create-app/template-react-admin-ts/viter.config.ts b/packages/create-app/template-react-admin-ts/viter.config.ts
@@ -1,8 +1,23 @@
-import { defineConfig } from 'vite';
-import reactRefresh from '@vitejs/plugin-react-refresh';
-const { resolve } = require('path');
+import { defineConfig } from "viter";
+import reactRefresh from "@vitejs/plugin-react-refresh";
+const { resolve } = require("path");
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [reactRefresh()],
+  routes: [
+    {
+      path: "/",
+      component: "@/layout",
+      routes: [
+        { path: "/home", component: "./Home" },
+        { path: "/about", component: "./About" },
+        { path: "/404", component: "./NotFind" },
+        { path: "/*", redirect: "/404" },
+      ],
+    },
+  ],
+  dynamicImport: {
+    loading: "@/loading",
+  },
 });
diff --git a/packages/renderer/package.json b/packages/renderer/package.json
@@ -34,14 +34,14 @@
     "url": "https://github.com/ykfe/viter/issues"
   },
   "dependencies": {
-    "@types/react": "^16.9.43",
-    "@types/react-dom": "^16.9.8",
     "art-template": "^4.13.2",
     "lodash-es": "^4.17.21",
     "mkdirp": "^1.0.4",
     "react-router-dom": "^6.0.0-beta.0"
   },
   "devDependencies": {
+    "@types/react": "^16.9.43",
+    "@types/react-dom": "^16.9.8",
     "@types/lodash": "^4.14.170",
     "@types/lodash-es": "^4.17.4",
     "@types/mkdirp": "^1.0.1",

diff --git a/packages/renderer/src/generateInitFiles/routes.ts b/packages/renderer/src/generateInitFiles/routes.ts
@@ -10,6 +10,7 @@ export interface IRoute {
   path?: string;
   routes?: IRoute[];
   title?: string;
+  redirect?: string;
   [key: string]: any;
 }
 export interface IDynamicImport {

diff --git a/packages/renderer/src/generateInitFiles/tplFiles/router.tpl b/packages/renderer/src/generateInitFiles/tplFiles/router.tpl
@@ -1,5 +1,5 @@
 import React from 'react';
-import { BrowserRouter } from '@viter/runtime';
+import { BrowserRouter } from 'viter';
 import Routes from './routes'
 export default function renderRouter() {
   return (

diff --git a/packages/renderer/src/generateInitFiles/tplFiles/routes.tpl b/packages/renderer/src/generateInitFiles/tplFiles/routes.tpl
@@ -1,7 +1,7 @@
 {{if dynamic}}
-import { dynamic } from '@viter/runtime';
+import { dynamic } from 'viter';
 {{/if}}
-import { Navigate, useRoutes } from '@viter/runtime';
+import { Navigate, useRoutes } from 'viter';
 import React from 'react';
 {{each modules}}
 import {{$value.name}} from '{{$value.path}}';

diff --git a/packages/viter/package.json b/packages/viter/package.json
@@ -13,7 +13,7 @@
   "homepage": "https://github.com/ykfe/viter",
   "license": "MIT",
   "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "module": "dist/esm/runtime.js",
   "types": "dist/src/index.d.ts",
   "directories": {
     "dist": "dist"
@@ -46,6 +46,7 @@
     "@types/react": "^17.0.13",
     "cac": "^6.7.3",
     "chokidar": "^3.5.2",
+    "lodash": "^4.17.21",
     "react": "^17.0.2",
     "rollup": "^2.53.3",
     "source-map-support": "^0.5.19"
@@ -58,7 +59,6 @@
   "peerDependencies": {
     "@viter/renderer": "^0.2.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "vite": "^2.4.3"
+    "react-dom": "^17.0.2"
   }
 }
diff --git a/packages/viter/rollup.config.js b/packages/viter/rollup.config.js
@@ -1,46 +1,64 @@
 import path from 'path';
 import rollupBaseConfig from '../../rollup.config';
 import pkg from './package.json';
-
+import { cloneDeep, merge } from 'lodash';
 const external = [
   'fsevents',
   'anymatch',
   'is-binary-path',
   'object-assign',
+  'vite',
   ...Object.keys(pkg.peerDependencies),
 ];
 
-export default Object.assign(rollupBaseConfig, {
-  input: {
-    index: './src/index.ts',
-    cli: './src/cli.ts',
-  },
-  output: [
-    {
+export default [
+  merge(cloneDeep(rollupBaseConfig), {
+    input: {
+      index: './src/index.ts',
+      cli: './src/cli.ts',
+    },
+    output: {
       dir: path.resolve(__dirname, 'dist/cjs'),
       entryFileNames: `[name].js`,
       chunkFileNames: 'chunks/dep-[hash].js',
       exports: 'named',
       format: 'cjs',
       sourcemap: true,
     },
-    {
+
+    external,
+    onwarn(warning, warn) {
+      // vite use the eval('require') trick to deal with optional deps
+      if (warning.message.includes('Use of eval')) {
+        return;
+      }
+      if (warning.message.includes('Circular dependency')) {
+        return;
+      }
+      warn(warning);
+    },
+  }),
+  merge(cloneDeep(rollupBaseConfig), {
+    input: {
+      runtime: './src/runtime.ts',
+    },
+    output: {
       dir: path.resolve(__dirname, 'dist/esm'),
       entryFileNames: `[name].js`,
       chunkFileNames: 'chunks/dep-[hash].js',
       format: 'es',
       sourcemap: true,
     },
-  ],
-  external,
-  onwarn(warning, warn) {
-    // vite use the eval('require') trick to deal with optional deps
-    if (warning.message.includes('Use of eval')) {
-      return;
-    }
-    if (warning.message.includes('Circular dependency')) {
-      return;
-    }
-    warn(warning);
-  },
-});
+    external,
+    onwarn(warning, warn) {
+      // vite use the eval('require') trick to deal with optional deps
+      if (warning.message.includes('Use of eval')) {
+        return;
+      }
+      if (warning.message.includes('Circular dependency')) {
+        return;
+      }
+      warn(warning);
+    },
+  }),
+];
diff --git a/packages/viter/src/config.ts b/packages/viter/src/config.ts
@@ -77,6 +77,11 @@ export function convertConfig(config: ResolvedConfig): ViteUserConfig {
         ignored: [configFile],
       },
     },
+    resolve: {
+      alias: {
+        '@': path.resolve(process.cwd(), 'src'),
+      },
+    },
   };
   const viteConfig = mergeConfig(config, innerConfig);
 

diff --git a/packages/viter/src/index.ts b/packages/viter/src/index.ts
@@ -1,3 +1 @@
-export * from '@viter/runtime';
-
 export * from './config';
diff --git a/packages/viter/src/runtime.ts b/packages/viter/src/runtime.ts
@@ -0,0 +1 @@
+export * from '@viter/runtime';
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1 @@
		export * from '@viter/runtime';

		export * from './config';