@shark-pepper/create-app 1.0.3 → 1.0.5

package/templates/react-app/src/App.tsx

@@ -1,3 +1,20 @@
+import styles from '@/styles/App.module.scss';
+
 export default function App() {
-  return <h1>Welcome to React</h1>;
+  return (
+    <div className={styles.app}>
+      <svg
+        width="112"
+        role="img"
+        viewBox="0 0 24 24"
+        fill="#087ea4"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>React</title>
+        <path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
+      </svg>
+      <p className={styles.thanks}>Thanks for using @shark-pepper/create-app</p>
+      <p className={styles.start}>Let's start coding!</p>
+    </div>
+  );
 }

package/templates/react-app/src/index.tsx

@@ -1,6 +1,17 @@
-import { createRoot } from "react-dom/client";
-import App from "./App";
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter, useRoutes } from 'react-router-dom';
+import routes from './routes';
 
-const container = document.getElementById("root")!;
+const AppRouter: React.FC = () => useRoutes(routes);
+
+const container = document.getElementById('root')!;
 const root = createRoot(container);
-root.render(<App />);
+
+root.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <AppRouter />
+    </BrowserRouter>
+  </React.StrictMode>,
+);

package/templates/react-app/src/routes/index.tsx

@@ -0,0 +1,11 @@
+import { RouteObject } from 'react-router-dom';
+import App from '@/App';
+
+const routes: RouteObject[] = [
+  {
+    path: '/',
+    element: <App />,
+  },
+];
+
+export default routes;

package/templates/react-app/src/styles/App.module.scss

@@ -0,0 +1,16 @@
+.app {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.thanks {
+  font-size: 20px;
+}
+
+.start {
+  font-size: 20px;
+  margin-top: 0;
+}

package/templates/react-app/webpack/webpack.common.js

@@ -0,0 +1,53 @@
+import path from 'path';
+
+const __dirname = path.resolve();
+
+export default {
+  entry: path.resolve(__dirname, './src/index.tsx'),
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: '/',
+    clean: true,
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(png|jpe?g|gif|svg|webp)$/i,
+        type: 'asset',
+        parser: { dataUrlCondition: { maxSize: 10 * 1024 } },
+        generator: { filename: 'images/[name].[hash:8][ext]' },
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)$/i,
+        type: 'asset/resource',
+        generator: { filename: 'fonts/[name].[hash:8][ext]' },
+      },
+    ],
+  },
+
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+      cacheGroups: {
+        reactVendor: {
+          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
+          name: 'react-vendor',
+          chunks: 'all',
+        },
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendor',
+          chunks: 'all',
+        },
+      },
+    },
+    runtimeChunk: 'single',
+    moduleIds: 'deterministic',
+  },
+};

package/templates/react-app/webpack/webpack.dev.js

@@ -0,0 +1,81 @@
+import path from 'path';
+import { merge } from 'webpack-merge';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import ESLintPlugin from 'eslint-webpack-plugin';
+import common from './webpack.common.js';
+
+const __dirname = path.resolve();
+
+export default merge(common, {
+  mode: 'development',
+
+  output: {
+    filename: 'js/[name].js',
+    chunkFilename: 'js/[name].chunk.js',
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: 'esbuild-loader',
+            options: { loader: 'tsx', target: 'es2017' },
+          },
+        ],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.module\.scss$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: '[name]__[local]___[hash:base64:5]',
+                exportLocalsConvention: 'asIs',
+              },
+              esModule: false,
+            },
+          },
+          'postcss-loader',
+          'sass-loader',
+        ],
+      },
+      {
+        test: /\.scss$/,
+        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
+        exclude: /\.module\.scss$/,
+      },
+    ],
+  },
+
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, './public/index.html'),
+      inject: 'body',
+      minify: false,
+    }),
+    new ReactRefreshWebpackPlugin(),
+    new ForkTsCheckerWebpackPlugin({
+      async: true,
+      typescript: { configFile: path.resolve(__dirname, './tsconfig.json') },
+    }),
+    new ESLintPlugin({ extensions: ['ts', 'tsx', 'js', 'jsx'], fix: true, emitWarning: true }),
+  ].filter(Boolean),
+
+  devtool: 'cheap-module-source-map',
+
+  devServer: {
+    static: path.resolve(__dirname, './public'),
+    compress: true,
+    port: 3000,
+    hot: true,
+    historyApiFallback: true,
+    open: true,
+  },
+});

package/templates/react-app/webpack/webpack.prod.js

@@ -0,0 +1,84 @@
+import path from 'path';
+import { merge } from 'webpack-merge';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import ESLintPlugin from 'eslint-webpack-plugin';
+import common from './webpack.common.js';
+
+const __dirname = path.resolve();
+
+export default merge(common, {
+  mode: 'production',
+
+  output: {
+    filename: 'js/[name].[contenthash:8].js',
+    chunkFilename: 'js/[name].[contenthash:8].chunk.js',
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: 'babel-loader',
+          },
+        ],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.module\.scss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: '[hash:base64:8]',
+                exportLocalsConvention: 'asIs',
+              },
+              esModule: false,
+            },
+          },
+          'postcss-loader',
+          'sass-loader',
+        ],
+      },
+      {
+        test: /\.scss$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
+        exclude: /\.module\.scss$/,
+      },
+    ],
+  },
+
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, './public/index.html'),
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeRedundantAttributes: true,
+        useShortDoctype: true,
+        removeEmptyAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        keepClosingSlash: true,
+        minifyJS: true,
+        minifyCSS: true,
+        minifyURLs: true,
+      },
+    }),
+    new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css' }),
+    new ForkTsCheckerWebpackPlugin({
+      async: false,
+      typescript: {
+        configFile: path.resolve(__dirname, './tsconfig.json'),
+      },
+    }),
+    new ESLintPlugin({ extensions: ['ts', 'tsx', 'js', 'jsx'], fix: true, emitWarning: false }),
+  ].filter(Boolean),
+
+  devtool: 'source-map',
+});

package/templates/react-app/webpack.config.js

@@ -1,123 +0,0 @@
-import path from 'path';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
-import ESLintPlugin from 'eslint-webpack-plugin';
-
-const __dirname = path.resolve(); // ESModule 下获取 __dirname
-
-const isProd = process.env.NODE_ENV === 'production';
-
-export default {
-  mode: isProd ? 'production' : 'development',
-
-  entry: path.resolve(__dirname, 'src/index.tsx'),
-
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: isProd ? 'js/[name].[contenthash:8].js' : 'js/[name].js',
-    chunkFilename: isProd ? 'js/[name].[contenthash:8].chunk.js' : 'js/[name].chunk.js',
-    publicPath: '/',
-    clean: true, // 自动清理 dist 目录
-  },
-
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
-    alias: {
-      '@': path.resolve(__dirname, 'src'),
-    },
-  },
-
-  module: {
-    rules: [
-      // TS / TSX
-      {
-        test: /\.tsx?$/,
-        use: [
-          {
-            loader: 'ts-loader',
-            options: { transpileOnly: true }, // 类型检查交给 ForkTsCheckerWebpackPlugin
-          },
-        ],
-        exclude: /node_modules/,
-      },
-
-      // CSS / SCSS
-      {
-        test: /\.css$/i,
-        use: [
-          isProd ? MiniCssExtractPlugin.loader : 'style-loader',
-          'css-loader',
-          'postcss-loader',
-        ],
-      },
-      {
-        test: /\.s[ac]ss$/i,
-        use: [
-          isProd ? MiniCssExtractPlugin.loader : 'style-loader',
-          'css-loader',
-          'postcss-loader',
-          'sass-loader',
-        ],
-      },
-
-      // 静态资源（图片 / 字体）
-      {
-        test: /\.(png|jpe?g|gif|svg|webp)$/i,
-        type: 'asset',
-        parser: { dataUrlCondition: { maxSize: 10 * 1024 } },
-        generator: { filename: 'images/[name].[hash:8][ext]' },
-      },
-      {
-        test: /\.(woff2?|eot|ttf|otf)$/i,
-        type: 'asset/resource',
-        generator: { filename: 'fonts/[name].[hash:8][ext]' },
-      },
-    ],
-  },
-
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: path.resolve(__dirname, 'public/index.html'),
-      inject: 'body',
-      minify: isProd ? { removeComments: true, collapseWhitespace: true } : false,
-    }),
-    isProd && new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css' }),
-    new ForkTsCheckerWebpackPlugin({
-      async: !isProd,
-      typescript: { configFile: path.resolve(__dirname, 'tsconfig.json') },
-    }),
-    new ESLintPlugin({ extensions: ['ts', 'tsx', 'js', 'jsx'], fix: true, emitWarning: !isProd }),
-  ].filter(Boolean),
-
-  devtool: isProd ? 'source-map' : 'eval-cheap-module-source-map',
-
-  devServer: {
-    static: path.resolve(__dirname, 'public'),
-    compress: true,
-    port: 3000,
-    hot: true,
-    historyApiFallback: true,
-    open: true,
-  },
-
-  optimization: {
-    splitChunks: {
-      chunks: 'all',
-      cacheGroups: {
-        reactVendor: {
-          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
-          name: 'react-vendor',
-          chunks: 'all',
-        },
-        vendor: {
-          test: /[\\/]node_modules[\\/]/,
-          name: 'vendor',
-          chunks: 'all',
-        },
-      },
-    },
-    runtimeChunk: 'single',
-    moduleIds: 'deterministic',
-  },
-};