@shark-pepper/create-app 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,11 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>My App</title>
7
+ </head>
8
+ <body>
9
+ <div id="root"></div>
10
+ </body>
11
+ </html>
@@ -0,0 +1,3 @@
1
+ export default function App() {
2
+ return <h1>Welcome to React</h1>;
3
+ }
@@ -0,0 +1,6 @@
1
+ import { createRoot } from "react-dom/client";
2
+ import App from "./App";
3
+
4
+ const container = document.getElementById("root")!;
5
+ const root = createRoot(container);
6
+ root.render(<App />);
@@ -0,0 +1,51 @@
1
+ {
2
+ "compilerOptions": {
3
+ /* 基本目标与模块 */
4
+ "target": "ES2022",
5
+ "module": "ESNext",
6
+
7
+ /* JSX 支持(React 17+ / 18+ 新 JSX 转换)*/
8
+ "jsx": "react-jsx",
9
+
10
+ /* 路径与解析 */
11
+ "baseUrl": "src",
12
+ "paths": {
13
+ "@/*": ["*"]
14
+ },
15
+ "moduleResolution": "node",
16
+
17
+ /* 语言与语法严格性 */
18
+ "strict": true,
19
+ "noImplicitAny": true,
20
+ "strictNullChecks": true,
21
+ "strictFunctionTypes": true,
22
+ "strictBindCallApply": true,
23
+ "alwaysStrict": true,
24
+
25
+ /* 兼容与互操作 */
26
+ "esModuleInterop": true,
27
+ "allowSyntheticDefaultImports": true,
28
+ "skipLibCheck": true,
29
+ "forceConsistentCasingInFileNames": true,
30
+
31
+ /* 输出与构建加速 */
32
+ "sourceMap": true,
33
+ "declaration": false,
34
+ "incremental": true,
35
+ "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo",
36
+ "outDir": "./dist",
37
+
38
+ /* 兼容 JSON/JS 混合项目 */
39
+ "resolveJsonModule": true,
40
+ "allowJs": false,
41
+ "isolatedModules": false,
42
+
43
+ /* 更严格/现代的选项(视团队需要) */
44
+ "noUnusedLocals": true,
45
+ "noUnusedParameters": false,
46
+ "noImplicitReturns": true,
47
+ "noFallthroughCasesInSwitch": true
48
+ },
49
+ "include": ["src"],
50
+ "exclude": ["node_modules", "dist", "build", "scripts"]
51
+ }
@@ -0,0 +1,123 @@
1
+ import path from 'path';
2
+ import HtmlWebpackPlugin from 'html-webpack-plugin';
3
+ import MiniCssExtractPlugin from 'mini-css-extract-plugin';
4
+ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
5
+ import ESLintPlugin from 'eslint-webpack-plugin';
6
+
7
+ const __dirname = path.resolve(); // ESModule 下获取 __dirname
8
+
9
+ const isProd = process.env.NODE_ENV === 'production';
10
+
11
+ export default {
12
+ mode: isProd ? 'production' : 'development',
13
+
14
+ entry: path.resolve(__dirname, 'src/index.tsx'),
15
+
16
+ output: {
17
+ path: path.resolve(__dirname, 'dist'),
18
+ filename: isProd ? 'js/[name].[contenthash:8].js' : 'js/[name].js',
19
+ chunkFilename: isProd ? 'js/[name].[contenthash:8].chunk.js' : 'js/[name].chunk.js',
20
+ publicPath: '/',
21
+ clean: true, // 自动清理 dist 目录
22
+ },
23
+
24
+ resolve: {
25
+ extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
26
+ alias: {
27
+ '@': path.resolve(__dirname, 'src'),
28
+ },
29
+ },
30
+
31
+ module: {
32
+ rules: [
33
+ // TS / TSX
34
+ {
35
+ test: /\.tsx?$/,
36
+ use: [
37
+ {
38
+ loader: 'ts-loader',
39
+ options: { transpileOnly: true }, // 类型检查交给 ForkTsCheckerWebpackPlugin
40
+ },
41
+ ],
42
+ exclude: /node_modules/,
43
+ },
44
+
45
+ // CSS / SCSS
46
+ {
47
+ test: /\.css$/i,
48
+ use: [
49
+ isProd ? MiniCssExtractPlugin.loader : 'style-loader',
50
+ 'css-loader',
51
+ 'postcss-loader',
52
+ ],
53
+ },
54
+ {
55
+ test: /\.s[ac]ss$/i,
56
+ use: [
57
+ isProd ? MiniCssExtractPlugin.loader : 'style-loader',
58
+ 'css-loader',
59
+ 'postcss-loader',
60
+ 'sass-loader',
61
+ ],
62
+ },
63
+
64
+ // 静态资源(图片 / 字体)
65
+ {
66
+ test: /\.(png|jpe?g|gif|svg|webp)$/i,
67
+ type: 'asset',
68
+ parser: { dataUrlCondition: { maxSize: 10 * 1024 } },
69
+ generator: { filename: 'images/[name].[hash:8][ext]' },
70
+ },
71
+ {
72
+ test: /\.(woff2?|eot|ttf|otf)$/i,
73
+ type: 'asset/resource',
74
+ generator: { filename: 'fonts/[name].[hash:8][ext]' },
75
+ },
76
+ ],
77
+ },
78
+
79
+ plugins: [
80
+ new HtmlWebpackPlugin({
81
+ template: path.resolve(__dirname, 'public/index.html'),
82
+ inject: 'body',
83
+ minify: isProd ? { removeComments: true, collapseWhitespace: true } : false,
84
+ }),
85
+ isProd && new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css' }),
86
+ new ForkTsCheckerWebpackPlugin({
87
+ async: !isProd,
88
+ typescript: { configFile: path.resolve(__dirname, 'tsconfig.json') },
89
+ }),
90
+ new ESLintPlugin({ extensions: ['ts', 'tsx', 'js', 'jsx'], fix: true, emitWarning: !isProd }),
91
+ ].filter(Boolean),
92
+
93
+ devtool: isProd ? 'source-map' : 'eval-cheap-module-source-map',
94
+
95
+ devServer: {
96
+ static: path.resolve(__dirname, 'public'),
97
+ compress: true,
98
+ port: 3000,
99
+ hot: true,
100
+ historyApiFallback: true,
101
+ open: true,
102
+ },
103
+
104
+ optimization: {
105
+ splitChunks: {
106
+ chunks: 'all',
107
+ cacheGroups: {
108
+ reactVendor: {
109
+ test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
110
+ name: 'react-vendor',
111
+ chunks: 'all',
112
+ },
113
+ vendor: {
114
+ test: /[\\/]node_modules[\\/]/,
115
+ name: 'vendor',
116
+ chunks: 'all',
117
+ },
118
+ },
119
+ },
120
+ runtimeChunk: 'single',
121
+ moduleIds: 'deterministic',
122
+ },
123
+ };