@arkxio/ark-dev-utils 0.1.1 → 0.1.3

package/dist/ark-dev-utils.js

@@ -568,15 +568,21 @@
     return assetItem;
   }
 
+  // 注意：这个变量需要在每次编译时重置
+  // 不在这里维护，而是通过 options 传递
   let custScriptIdx = 0;
 
+  function resetScriptIdx() {
+    custScriptIdx = 0;
+  }
+
   /**
    * @param {HTMLScriptElement | HTMLStyleElement} childDom
    * @param {string} fileType
    * @param {IInnerFillAssetListOptions} options
    */
   async function writeInnerText(childDom, fileType, options) {
-    const { homePage, buildDirFullPath } = options;
+    const { homePage, buildDirFullPath, compilation, customAssets = [] } = options;
     const innerText = getInnerText(childDom);
     if (!innerText) return '';
 
@@ -586,7 +592,24 @@
     const fileAbsolutePath = `${buildDirFullPath}/${scriptName}`;
     const fileWebPath = `${slash.noEnd(homePage)}/${scriptName}`;
 
-    await writeFile(fileAbsolutePath, innerText);
+    // 在开发模式下，使用 compilation.emitAsset 确保文件能被 dev server 访问
+    if (compilation && compilation.emitAsset) {
+      const { sources } = compilation.compiler.webpack;
+      compilation.emitAsset(
+        scriptName,
+        new sources.RawSource(innerText)
+      );
+      verbose(`emit asset ${scriptName} via webpack compilation`);
+    } else {
+      // 生产模式或没有 compilation 对象时，直接写入文件系统
+      await writeFile(fileAbsolutePath, innerText);
+    }
+
+    // 将自定义资产信息保存到 customAssets 数组，供后续使用
+    if (customAssets) {
+      customAssets.push({ scriptName, fileWebPath, content: innerText });
+    }
+
     verbose(`write done, the web file will be ${fileWebPath} later`);
     return fileWebPath;
   }
@@ -965,11 +988,22 @@
       verbose('[begin] write memory ark meta ' + metaFilename);
 
       const metaContent = JSON.stringify(arkMeta, null, 2);
-      // 写入 webpack 内存文件系统
-      userExtractOptions.compilation.assets[metaFilename] = {
-        source: () => metaContent,
-        size: () => metaContent.length
-      };
+      const compilation = userExtractOptions.compilation;
+
+      // Webpack 5 正确的 API：使用 emitAsset
+      if (compilation.emitAsset) {
+        const { sources } = compilation.compiler.webpack;
+        compilation.emitAsset(
+          metaFilename,
+          new sources.RawSource(metaContent)
+        );
+      } else {
+        // Webpack 4 兼容
+        compilation.assets[metaFilename] = {
+          source: () => metaContent,
+          size: () => metaContent.length
+        };
+      }
       verbose('[finish] write memory ark meta ' + metaFilename);
     }else if (writeMetaJsonToDist) {
       // 生产模式：写入物理文件
@@ -1119,8 +1153,8 @@
     '@arkxio/ark-micro-core': 'ArkMicroCore',
     '@arkxio/ark-lib-proxy': 'ArkLibProxy',
     '@arkxio/ark-micro': 'ArkMicro',
-    'echarts': 'echarts',
-    'tinymce': 'tinymce'
+    // 'echarts': 'echarts',
+    // 'tinymce': 'tinymce'
     //   "loadjs": {  //将vue依赖 "外部化"，不打包进组件库
     //     root: 'loadjs',
     //     commonjs: 'loadjs',
@@ -1141,6 +1175,11 @@
       compiler.context;
       const useExtractOptions = this.metaOptions;
 
+      // 在每次编译开始时重置脚本索引计数器，确保文件名一致性
+      compiler.hooks.thisCompilation.tap('ArkResetScriptIdx', () => {
+        resetScriptIdx();
+      });
+
       compiler.hooks.thisCompilation.tap('ArkDynamicCdnChunkLoaderPlugin', (compilation) => {
         compilation.hooks.processAssets.tap(
           {
@@ -1212,25 +1251,18 @@
       });
 
       compiler.hooks.emit.tapPromise('ArkMetaJsonGeneratorPlugin', async (compilation) => {
-        const assets = compilation.assets;
-        const outputPath = compilation.options.output.publicPath;
-        const jsFiles = [];
-        Object.keys(assets).forEach((assetName) => {
-          if (assetName.endsWith('.js')) {
-            console.log('Final JS file:', assetName);
-            if (assetName.indexOf('js/app.') !== -1) {
-              jsFiles.push(outputPath + assetName);
-            }
-          }
-        });
-
         // 注入环境判断脚本
         const isDev = process.env.NODE_ENV === 'development';
+
+        // 创建 customAssets 数组用于收集自定义资产（如从 HTML 内联 script 提取的代码）
+        const customAssets = [];
+
         await extractArkMetaJson({
           ...useExtractOptions,
-          chunkJsFiles: jsFiles,
+          // chunkJsFiles 将从 HTML 中的内联 script 提取，不需要在这里传递
           isDev: isDev,
-          compilation: compilation
+          compilation: compilation,
+          customAssets: customAssets
         });
 
         return Promise.resolve();

package/dist/ark-dev-utils.min.js

@@ -568,15 +568,21 @@
     return assetItem;
   }
 
+  // 注意：这个变量需要在每次编译时重置
+  // 不在这里维护，而是通过 options 传递
   let custScriptIdx = 0;
 
+  function resetScriptIdx() {
+    custScriptIdx = 0;
+  }
+
   /**
    * @param {HTMLScriptElement | HTMLStyleElement} childDom
    * @param {string} fileType
    * @param {IInnerFillAssetListOptions} options
    */
   async function writeInnerText(childDom, fileType, options) {
-    const { homePage, buildDirFullPath } = options;
+    const { homePage, buildDirFullPath, compilation, customAssets = [] } = options;
     const innerText = getInnerText(childDom);
     if (!innerText) return '';
 
@@ -586,7 +592,24 @@
     const fileAbsolutePath = `${buildDirFullPath}/${scriptName}`;
     const fileWebPath = `${slash.noEnd(homePage)}/${scriptName}`;
 
-    await writeFile(fileAbsolutePath, innerText);
+    // 在开发模式下，使用 compilation.emitAsset 确保文件能被 dev server 访问
+    if (compilation && compilation.emitAsset) {
+      const { sources } = compilation.compiler.webpack;
+      compilation.emitAsset(
+        scriptName,
+        new sources.RawSource(innerText)
+      );
+      verbose(`emit asset ${scriptName} via webpack compilation`);
+    } else {
+      // 生产模式或没有 compilation 对象时，直接写入文件系统
+      await writeFile(fileAbsolutePath, innerText);
+    }
+
+    // 将自定义资产信息保存到 customAssets 数组，供后续使用
+    if (customAssets) {
+      customAssets.push({ scriptName, fileWebPath, content: innerText });
+    }
+
     verbose(`write done, the web file will be ${fileWebPath} later`);
     return fileWebPath;
   }
@@ -965,11 +988,22 @@
       verbose('[begin] write memory ark meta ' + metaFilename);
 
       const metaContent = JSON.stringify(arkMeta, null, 2);
-      // 写入 webpack 内存文件系统
-      userExtractOptions.compilation.assets[metaFilename] = {
-        source: () => metaContent,
-        size: () => metaContent.length
-      };
+      const compilation = userExtractOptions.compilation;
+
+      // Webpack 5 正确的 API：使用 emitAsset
+      if (compilation.emitAsset) {
+        const { sources } = compilation.compiler.webpack;
+        compilation.emitAsset(
+          metaFilename,
+          new sources.RawSource(metaContent)
+        );
+      } else {
+        // Webpack 4 兼容
+        compilation.assets[metaFilename] = {
+          source: () => metaContent,
+          size: () => metaContent.length
+        };
+      }
       verbose('[finish] write memory ark meta ' + metaFilename);
     }else if (writeMetaJsonToDist) {
       // 生产模式：写入物理文件
@@ -1119,8 +1153,8 @@
     '@arkxio/ark-micro-core': 'ArkMicroCore',
     '@arkxio/ark-lib-proxy': 'ArkLibProxy',
     '@arkxio/ark-micro': 'ArkMicro',
-    'echarts': 'echarts',
-    'tinymce': 'tinymce'
+    // 'echarts': 'echarts',
+    // 'tinymce': 'tinymce'
     //   "loadjs": {  //将vue依赖 "外部化"，不打包进组件库
     //     root: 'loadjs',
     //     commonjs: 'loadjs',
@@ -1141,6 +1175,11 @@
       compiler.context;
       const useExtractOptions = this.metaOptions;
 
+      // 在每次编译开始时重置脚本索引计数器，确保文件名一致性
+      compiler.hooks.thisCompilation.tap('ArkResetScriptIdx', () => {
+        resetScriptIdx();
+      });
+
       compiler.hooks.thisCompilation.tap('ArkDynamicCdnChunkLoaderPlugin', (compilation) => {
         compilation.hooks.processAssets.tap(
           {
@@ -1212,25 +1251,18 @@
       });
 
       compiler.hooks.emit.tapPromise('ArkMetaJsonGeneratorPlugin', async (compilation) => {
-        const assets = compilation.assets;
-        const outputPath = compilation.options.output.publicPath;
-        const jsFiles = [];
-        Object.keys(assets).forEach((assetName) => {
-          if (assetName.endsWith('.js')) {
-            console.log('Final JS file:', assetName);
-            if (assetName.indexOf('js/app.') !== -1) {
-              jsFiles.push(outputPath + assetName);
-            }
-          }
-        });
-
         // 注入环境判断脚本
         const isDev = process.env.NODE_ENV === 'development';
+
+        // 创建 customAssets 数组用于收集自定义资产（如从 HTML 内联 script 提取的代码）
+        const customAssets = [];
+
         await extractArkMetaJson({
           ...useExtractOptions,
-          chunkJsFiles: jsFiles,
+          // chunkJsFiles 将从 HTML 中的内联 script 提取，不需要在这里传递
           isDev: isDev,
-          compilation: compilation
+          compilation: compilation,
+          customAssets: customAssets
         });
 
         return Promise.resolve();

package/lib/index.js

@@ -573,15 +573,21 @@ function buildAssetItem(tag, /** @type {IAssetInfo} */ assetInfo) {
   return assetItem;
 }
 
+// 注意：这个变量需要在每次编译时重置
+// 不在这里维护，而是通过 options 传递
 let custScriptIdx = 0;
 
+function resetScriptIdx() {
+  custScriptIdx = 0;
+}
+
 /**
  * @param {HTMLScriptElement | HTMLStyleElement} childDom
  * @param {string} fileType
  * @param {IInnerFillAssetListOptions} options
  */
 async function writeInnerText(childDom, fileType, options) {
-  const { homePage, buildDirFullPath } = options;
+  const { homePage, buildDirFullPath, compilation, customAssets = [] } = options;
   const innerText = getInnerText(childDom);
   if (!innerText) return '';
 
@@ -591,7 +597,24 @@ async function writeInnerText(childDom, fileType, options) {
   const fileAbsolutePath = `${buildDirFullPath}/${scriptName}`;
   const fileWebPath = `${slash.noEnd(homePage)}/${scriptName}`;
 
-  await writeFile(fileAbsolutePath, innerText);
+  // 在开发模式下，使用 compilation.emitAsset 确保文件能被 dev server 访问
+  if (compilation && compilation.emitAsset) {
+    const { sources } = compilation.compiler.webpack;
+    compilation.emitAsset(
+      scriptName,
+      new sources.RawSource(innerText)
+    );
+    verbose(`emit asset ${scriptName} via webpack compilation`);
+  } else {
+    // 生产模式或没有 compilation 对象时，直接写入文件系统
+    await writeFile(fileAbsolutePath, innerText);
+  }
+
+  // 将自定义资产信息保存到 customAssets 数组，供后续使用
+  if (customAssets) {
+    customAssets.push({ scriptName, fileWebPath, content: innerText });
+  }
+
   verbose(`write done, the web file will be ${fileWebPath} later`);
   return fileWebPath;
 }
@@ -970,11 +993,22 @@ async function extractArkMetaJson(userExtractOptions) {
     verbose('[begin] write memory ark meta ' + metaFilename);
 
     const metaContent = JSON.stringify(arkMeta, null, 2);
-    // 写入 webpack 内存文件系统
-    userExtractOptions.compilation.assets[metaFilename] = {
-      source: () => metaContent,
-      size: () => metaContent.length
-    };
+    const compilation = userExtractOptions.compilation;
+
+    // Webpack 5 正确的 API：使用 emitAsset
+    if (compilation.emitAsset) {
+      const { sources } = compilation.compiler.webpack;
+      compilation.emitAsset(
+        metaFilename,
+        new sources.RawSource(metaContent)
+      );
+    } else {
+      // Webpack 4 兼容
+      compilation.assets[metaFilename] = {
+        source: () => metaContent,
+        size: () => metaContent.length
+      };
+    }
     verbose('[finish] write memory ark meta ' + metaFilename);
   }else if (writeMetaJsonToDist) {
     // 生产模式：写入物理文件
@@ -1124,8 +1158,8 @@ var ExternalsDefault = {
   '@arkxio/ark-micro-core': 'ArkMicroCore',
   '@arkxio/ark-lib-proxy': 'ArkLibProxy',
   '@arkxio/ark-micro': 'ArkMicro',
-  'echarts': 'echarts',
-  'tinymce': 'tinymce'
+  // 'echarts': 'echarts',
+  // 'tinymce': 'tinymce'
   //   "loadjs": {  //将vue依赖 "外部化"，不打包进组件库
   //     root: 'loadjs',
   //     commonjs: 'loadjs',
@@ -1146,6 +1180,11 @@ class ArkWebpackPlugin {
     compiler.context;
     const useExtractOptions = this.metaOptions;
 
+    // 在每次编译开始时重置脚本索引计数器，确保文件名一致性
+    compiler.hooks.thisCompilation.tap('ArkResetScriptIdx', () => {
+      resetScriptIdx();
+    });
+
     compiler.hooks.thisCompilation.tap('ArkDynamicCdnChunkLoaderPlugin', (compilation) => {
       compilation.hooks.processAssets.tap(
         {
@@ -1217,25 +1256,18 @@ class ArkWebpackPlugin {
     });
 
     compiler.hooks.emit.tapPromise('ArkMetaJsonGeneratorPlugin', async (compilation) => {
-      const assets = compilation.assets;
-      const outputPath = compilation.options.output.publicPath;
-      const jsFiles = [];
-      Object.keys(assets).forEach((assetName) => {
-        if (assetName.endsWith('.js')) {
-          console.log('Final JS file:', assetName);
-          if (assetName.indexOf('js/app.') !== -1) {
-            jsFiles.push(outputPath + assetName);
-          }
-        }
-      });
-
       // 注入环境判断脚本
       const isDev = process.env.NODE_ENV === 'development';
+
+      // 创建 customAssets 数组用于收集自定义资产（如从 HTML 内联 script 提取的代码）
+      const customAssets = [];
+
       await extractArkMetaJson({
         ...useExtractOptions,
-        chunkJsFiles: jsFiles,
+        // chunkJsFiles 将从 HTML 中的内联 script 提取，不需要在这里传递
         isDev: isDev,
-        compilation: compilation
+        compilation: compilation,
+        customAssets: customAssets
       });
 
       return Promise.resolve();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arkxio/ark-dev-utils",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "ark dev utils",
   "repository": {
     "type": "git",

package/src/ArkWebpackPlugin.js

@@ -2,6 +2,7 @@ import path from "path";
 import extractArkMetaJson from './meta-extractor/index';
 import {verbose} from "./inner-utils";
 import { Compilation } from 'webpack';
+import { resetScriptIdx } from './meta-extractor/fillAssetList';
 
 export default class ArkWebpackPlugin {
 
@@ -14,6 +15,11 @@ export default class ArkWebpackPlugin {
     const projectRoot = compiler.context;
     const useExtractOptions = this.metaOptions;
 
+    // 在每次编译开始时重置脚本索引计数器，确保文件名一致性
+    compiler.hooks.thisCompilation.tap('ArkResetScriptIdx', () => {
+      resetScriptIdx();
+    });
+
     compiler.hooks.thisCompilation.tap('ArkDynamicCdnChunkLoaderPlugin', (compilation) => {
       compilation.hooks.processAssets.tap(
         {
@@ -85,25 +91,18 @@ export default class ArkWebpackPlugin {
     });
 
     compiler.hooks.emit.tapPromise('ArkMetaJsonGeneratorPlugin', async (compilation) => {
-      const assets = compilation.assets;
-      const outputPath = compilation.options.output.publicPath;
-      const jsFiles = []
-      Object.keys(assets).forEach((assetName) => {
-        if (assetName.endsWith('.js')) {
-          console.log('Final JS file:', assetName);
-          if (assetName.indexOf('js/app.') !== -1) {
-            jsFiles.push(outputPath + assetName);
-          }
-        }
-      });
-
       // 注入环境判断脚本
       const isDev = process.env.NODE_ENV === 'development';
+
+      // 创建 customAssets 数组用于收集自定义资产（如从 HTML 内联 script 提取的代码）
+      const customAssets = [];
+
       const arkMeta = await extractArkMetaJson({
         ...useExtractOptions,
-        chunkJsFiles: jsFiles,
+        // chunkJsFiles 将从 HTML 中的内联 script 提取，不需要在这里传递
         isDev: isDev,
-        compilation: compilation
+        compilation: compilation,
+        customAssets: customAssets
       });
 
       return Promise.resolve();

package/src/configs/externalsDefault.js

@@ -12,8 +12,8 @@ export default {
   '@arkxio/ark-micro-core': 'ArkMicroCore',
   '@arkxio/ark-lib-proxy': 'ArkLibProxy',
   '@arkxio/ark-micro': 'ArkMicro',
-  'echarts': 'echarts',
-  'tinymce': 'tinymce'
+  // 'echarts': 'echarts',
+  // 'tinymce': 'tinymce'
   //   "loadjs": {  //将vue依赖 "外部化"，不打包进组件库
   //     root: 'loadjs',
   //     commonjs: 'loadjs',

package/src/meta-extractor/fillAssetList.js

@@ -64,15 +64,21 @@ function buildAssetItem(tag, /** @type {IAssetInfo} */ assetInfo) {
   return assetItem;
 }
 
+// 注意：这个变量需要在每次编译时重置
+// 不在这里维护，而是通过 options 传递
 let custScriptIdx = 0;
 
+export function resetScriptIdx() {
+  custScriptIdx = 0;
+}
+
 /**
  * @param {HTMLScriptElement | HTMLStyleElement} childDom
  * @param {string} fileType
  * @param {IInnerFillAssetListOptions} options
  */
 async function writeInnerText(childDom, fileType, options) {
-  const { homePage, buildDirFullPath } = options;
+  const { homePage, buildDirFullPath, compilation, customAssets = [] } = options;
   const innerText = getInnerText(childDom);
   if (!innerText) return '';
 
@@ -82,7 +88,24 @@ async function writeInnerText(childDom, fileType, options) {
   const fileAbsolutePath = `${buildDirFullPath}/${scriptName}`;
   const fileWebPath = `${slash.noEnd(homePage)}/${scriptName}`;
 
-  await writeFile(fileAbsolutePath, innerText);
+  // 在开发模式下，使用 compilation.emitAsset 确保文件能被 dev server 访问
+  if (compilation && compilation.emitAsset) {
+    const { sources } = compilation.compiler.webpack;
+    compilation.emitAsset(
+      scriptName,
+      new sources.RawSource(innerText)
+    );
+    verbose(`emit asset ${scriptName} via webpack compilation`);
+  } else {
+    // 生产模式或没有 compilation 对象时，直接写入文件系统
+    await writeFile(fileAbsolutePath, innerText);
+  }
+
+  // 将自定义资产信息保存到 customAssets 数组，供后续使用
+  if (customAssets) {
+    customAssets.push({ scriptName, fileWebPath, content: innerText });
+  }
+
   verbose(`write done, the web file will be ${fileWebPath} later`);
   return fileWebPath;
 }

package/src/meta-extractor/index.js

@@ -56,11 +56,22 @@ export default async function extractArkMetaJson(userExtractOptions) {
     verbose('[begin] write memory ark meta ' + metaFilename)
 
     const metaContent = JSON.stringify(arkMeta, null, 2);
-    // 写入 webpack 内存文件系统
-    userExtractOptions.compilation.assets[metaFilename] = {
-      source: () => metaContent,
-      size: () => metaContent.length
-    };
+    const compilation = userExtractOptions.compilation;
+
+    // Webpack 5 正确的 API：使用 emitAsset
+    if (compilation.emitAsset) {
+      const { sources } = compilation.compiler.webpack;
+      compilation.emitAsset(
+        metaFilename,
+        new sources.RawSource(metaContent)
+      );
+    } else {
+      // Webpack 4 兼容
+      compilation.assets[metaFilename] = {
+        source: () => metaContent,
+        size: () => metaContent.length
+      };
+    }
     verbose('[finish] write memory ark meta ' + metaFilename)
   }else if (writeMetaJsonToDist) {
     // 生产模式：写入物理文件

package/typings.d.ts

@@ -235,6 +235,10 @@ export interface IInnerFillAssetListOptions {
   enableRelativePath: IUserExtractOptions['enableRelativePath'];
   enablePrefixHomePage: IUserExtractOptions['enablePrefixHomePage'];
   enableAssetInnerText: IUserExtractOptions['enableAssetInnerText'];
+  /** webpack compilation 对象，用于在开发模式下通过 emitAsset 输出文件 */
+  compilation?: any;
+  /** 自定义资产列表，用于收集从 HTML 内联脚本提取的代码 */
+  customAssets?: Array<{ scriptName: string; fileWebPath: string; content: string }>;
 }
 
 export interface ICreateSubAppOptions {