add index.esm.html

scripts/build.js

@@ -3,7 +3,7 @@ import cpy from 'cpy';
 import path from 'path';
 import prompts from 'prompts';
 import { Parcel } from '@parcel/core';
-import { formatDate, getProjects } from './utils.js';
+import { getProjects, injectPlaceholders } from './utils.js';
 
 const projects = getProjects();
 const compiledPath = path.resolve('docs/compiled');
@@ -28,6 +28,7 @@ async function build(name, targetName) {
             distDir: path.join(projects[name], 'dist'),
             sourceMap: false,
             outputFormat: 'global',
+            isLibrary: true,
             engines: {
                 browsers: 'last 1 Chrome version',
             },
@@ -37,19 +38,37 @@ async function build(name, targetName) {
             distDir: path.join(projects[name], 'dist'),
             sourceMap: false,
             outputFormat: 'global',
+            isLibrary: true,
             engines: {
                 browsers: 'IE 11',
             },
         },
+        esm: {
+            context: 'browser',
+            distDir: path.join(projects[name], 'dist'),
+            sourceMap: true,
+            outputFormat: 'esmodule',
+            isLibrary: true,
+            engines: {
+                browsers: 'last 1 Chrome version',
+            },
+        },
     };
 
     const names = {
         main: name,
         legacy: `${name}.legacy`,
+        esm: `${name}.esm`,
     };
 
+    const entryFile = path.join(projects[name], 'src/index.js');
+    const restorePlaceholders = injectPlaceholders(entryFile, {
+        __APP_VERSION__: `"${version}"`,
+        __NODE_ENV__: `"production"`,
+    });
+
     const bundler = new Parcel({
-        entries: path.join(projects[name], 'src/index.js'),
+        entries: entryFile,
         defaultConfig: '@parcel/config-default',
         mode: 'production',
         targets: {
@@ -57,8 +76,6 @@ async function build(name, targetName) {
         },
         env: {
             NODE_ENV: 'production',
-            APP_VER: version,
-            BUILD_DATE: formatDate(Date.now()),
         },
     });
 
@@ -78,7 +95,13 @@ async function build(name, targetName) {
         const filePath = path.join(projects[name], 'dist/index.js');
         const newFilePath = path.join(projects[name], `dist/${names[targetName]}.js`);
         const code = fs.readFileSync(filePath, 'utf-8');
-        fs.writeFileSync(filePath, banner + compressString(code));
+
+        if (targetName === 'esm') {
+            fs.writeFileSync(filePath, banner + '\n' + code);
+        } else {
+            fs.writeFileSync(filePath, banner + compressString(code));
+        }
+
         fs.renameSync(filePath, newFilePath);
         await cpy(newFilePath, compiledPath);
         const size = fs.statSync(newFilePath).size / 1024;
@@ -90,7 +113,9 @@ async function build(name, targetName) {
             `Size@${size.toFixed(2)}kb`,
         );
     } catch (error) {
-        console.error(`Failed to build ${name}:`, error);
+        console.error(`❌ Failed to build ${name}:`, error);
+    } finally {
+        restorePlaceholders();
     }
 }
 
@@ -99,10 +124,11 @@ async function runBuild() {
         const bundles = Object.keys(projects).map((name) => async () => {
             await build(name, 'main');
             await build(name, 'legacy');
+            await build(name, 'esm');
         });
 
         await runPromisesInSeries(bundles);
-        console.log('✨ Finished building all packages!');
+        console.log('✅ Finished building all packages!');
     } else {
         const response = await prompts({
             type: 'select',
@@ -118,6 +144,7 @@ async function runBuild() {
         if (response.value) {
             await build(response.value, 'main');
             await build(response.value, 'legacy');
+            await build(response.value, 'esm');
         }
     }
 }
@@ -127,5 +154,5 @@ function runPromisesInSeries(ps) {
 }
 
 runBuild().catch((error) => {
-    console.error('Build script encountered an error:', error);
+    console.error('❌ Build script encountered an error:', error);
 });

scripts/dev.js

@@ -2,39 +2,51 @@ import fs from 'fs';
 import path from 'path';
 import servor from 'servor';
 import prompts from 'prompts';
-import { fileURLToPath } from 'url';
 import { Parcel } from '@parcel/core';
-import { formatDate, getProjects } from './utils.js';
+import { fileURLToPath } from 'url';
+import { getProjects, injectPlaceholders } from './utils.js';
 import openBrowser from 'servor/utils/openBrowser.js';
 
 const projects = getProjects();
 
 async function develop(name) {
-    let isOpenBrowser = false;
+    const projectPath = projects[name];
     const uncompiledPath = path.resolve(`docs/uncompiled/${name}`);
-
-    const projectPackageJson = path.join(projects[name], 'package.json');
+    const entryFile = path.join(projectPath, 'src/index.js');
+    const projectPackageJson = path.join(projectPath, 'package.json');
     const { version } = JSON.parse(fs.readFileSync(projectPackageJson, 'utf-8'));
 
-    const serverConfig = {
-        root: 'docs',
-        fallback: 'index.html',
-        reload: true,
-        port: 8082,
-    };
+    const restore = injectPlaceholders(entryFile, {
+        __APP_VERSION__: `"${version}"`,
+        __NODE_ENV__: `"development"`,
+    });
+
+    process.on('SIGINT', () => {
+        restore();
+        process.exit();
+    });
+
+    let isOpenBrowser = false;
 
     try {
-        const { url } = await servor(serverConfig);
-        process.chdir(projects[name]);
+        const { url } = await servor({
+            root: 'docs',
+            fallback: 'index.html',
+            reload: true,
+            port: 8082,
+        });
 
-        const bundlerConfig = {
-            entries: `${projects[name]}/src/index.js`,
+        process.chdir(projectPath);
+
+        const bundler = new Parcel({
+            entries: entryFile,
             defaultConfig: '@parcel/config-default',
             mode: 'development',
             targets: {
                 main: {
                     distDir: uncompiledPath,
                     outputFormat: 'global',
+                    isLibrary: true,
                     engines: {
                         browsers: ['last 1 Chrome version'],
                     },
@@ -42,8 +54,6 @@ async function develop(name) {
             },
             env: {
                 NODE_ENV: 'development',
-                APP_VER: version,
-                BUILD_DATE: formatDate(Date.now()),
             },
             additionalReporters: [
                 {
@@ -51,28 +61,30 @@ async function develop(name) {
                     resolveFrom: fileURLToPath(import.meta.url),
                 },
             ],
-        };
-
-        const bundler = new Parcel(bundlerConfig);
+        });
 
         bundler.watch((error, event) => {
             if (error) {
-                console.error(`Build error: ${error}`);
+                console.error(`[${name}] ❌ Build error:`, error);
                 return;
             }
+
             if (event.type === 'buildSuccess') {
                 const bundles = event.bundleGraph.getBundles();
-                console.log(`[${name}] ✨ Built ${bundles.length} bundles in ${event.buildTime}ms!`);
+                console.log(`[${name}] ✅ Built ${bundles.length} bundles in ${event.buildTime}ms`);
                 if (!isOpenBrowser) {
                     isOpenBrowser = true;
                     openBrowser(url);
                 }
-            } else if (event.type === 'buildFailure') {
-                console.error(`[${name}] Build failure:`, event.diagnostics);
+            }
+
+            if (event.type === 'buildFailure') {
+                console.error(`[${name}] ❌ Build failure:`, event.diagnostics);
             }
         });
     } catch (error) {
-        console.error(`Failed to start development server for ${name}: ${error.message}`);
+        console.error(`❌ Failed to start dev server for ${name}: ${error.message}`);
+        restore();
     }
 }
 
@@ -90,9 +102,9 @@ async function develop(name) {
         });
 
         if (response.value) {
-            develop(response.value);
+            await develop(response.value);
         }
     } catch (error) {
-        console.error(`Prompt error: ${error.message}`);
+        console.error(`❌ Prompt error: ${error.message}`);
     }
 })();

scripts/utils.js

@@ -2,17 +2,6 @@ import fs from 'fs';
 import path from 'path';
 import { glob } from 'glob';
 
-export function formatDate(date) {
-    var date = new Date(Number(date));
-    var YY = date.getFullYear() + '-';
-    var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
-    var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
-    var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
-    var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
-    var ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
-    return YY + MM + DD + ' ' + hh + mm + ss;
-}
-
 export function getProjects() {
     return glob
         .sync('packages/*')
@@ -39,3 +28,16 @@ export function removeDir(dir) {
         fs.rmdirSync(dir);
     }
 }
+
+export function injectPlaceholders(filePath, placeholders) {
+    const original = fs.readFileSync(filePath, 'utf-8');
+    let modified = original;
+
+    for (const [key, value] of Object.entries(placeholders)) {
+        const pattern = new RegExp(key, 'g');
+        modified = modified.replace(pattern, value);
+    }
+
+    fs.writeFileSync(filePath, modified);
+    return () => fs.writeFileSync(filePath, original); // 构建完还原
+}