@arkxio/ark-dev-utils 0.1.2 → 0.1.4

package/dist/ark-dev-utils.js

@@ -582,8 +582,8 @@
    * @param {IInnerFillAssetListOptions} options
    */
   async function writeInnerText(childDom, fileType, options) {
-    const { homePage, buildDirFullPath } = options;
-    const innerText = getInnerText(childDom);
+    const { homePage, buildDirFullPath, compilation, customAssets = [] } = options;
+    let innerText = getInnerText(childDom);
     if (!innerText) return '';
 
     verbose(`found a user customized ${fileType} tag node in html, try extract its content and write them to local fs`);
@@ -592,7 +592,38 @@
     const fileAbsolutePath = `${buildDirFullPath}/${scriptName}`;
     const fileWebPath = `${slash.noEnd(homePage)}/${scriptName}`;
 
-    await writeFile(fileAbsolutePath, innerText);
+    // 对于 JS 文件，移除或替换 document.write() 调用
+    // 因为异步加载的脚本中不能使用 document.write()
+    if (fileType === 'js') {
+      // 方法1：完全移除 document.write() 调用（推荐）
+      // innerText = innerText.replace(/document\.write\s*\([^)]*\)/g, '');
+
+      // 方法2：用 console.warn 替换 document.write()，保留代码逻辑但避免错误
+      innerText = innerText.replace(
+        /document\.write\s*\(([^)]*)\)/g,
+        'console.warn("[ark-micro] document.write is not allowed in asynchronously loaded scripts:", $1)'
+      );
+      verbose(`Replaced document.write calls in ${scriptName}`);
+    }
+
+    // 在开发模式下，使用 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;
   }
@@ -1236,11 +1267,16 @@
       compiler.hooks.emit.tapPromise('ArkMetaJsonGeneratorPlugin', async (compilation) => {
         // 注入环境判断脚本
         const isDev = process.env.NODE_ENV === 'development';
+
+        // 创建 customAssets 数组用于收集自定义资产（如从 HTML 内联 script 提取的代码）
+        const customAssets = [];
+
         await extractArkMetaJson({
           ...useExtractOptions,
           // chunkJsFiles 将从 HTML 中的内联 script 提取，不需要在这里传递
           isDev: isDev,
-          compilation: compilation
+          compilation: compilation,
+          customAssets: customAssets
         });
 
         return Promise.resolve();

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

@@ -582,8 +582,8 @@
    * @param {IInnerFillAssetListOptions} options
    */
   async function writeInnerText(childDom, fileType, options) {
-    const { homePage, buildDirFullPath } = options;
-    const innerText = getInnerText(childDom);
+    const { homePage, buildDirFullPath, compilation, customAssets = [] } = options;
+    let innerText = getInnerText(childDom);
     if (!innerText) return '';
 
     verbose(`found a user customized ${fileType} tag node in html, try extract its content and write them to local fs`);
@@ -592,7 +592,38 @@
     const fileAbsolutePath = `${buildDirFullPath}/${scriptName}`;
     const fileWebPath = `${slash.noEnd(homePage)}/${scriptName}`;
 
-    await writeFile(fileAbsolutePath, innerText);
+    // 对于 JS 文件，移除或替换 document.write() 调用
+    // 因为异步加载的脚本中不能使用 document.write()
+    if (fileType === 'js') {
+      // 方法1：完全移除 document.write() 调用（推荐）
+      // innerText = innerText.replace(/document\.write\s*\([^)]*\)/g, '');
+
+      // 方法2：用 console.warn 替换 document.write()，保留代码逻辑但避免错误
+      innerText = innerText.replace(
+        /document\.write\s*\(([^)]*)\)/g,
+        'console.warn("[ark-micro] document.write is not allowed in asynchronously loaded scripts:", $1)'
+      );
+      verbose(`Replaced document.write calls in ${scriptName}`);
+    }
+
+    // 在开发模式下，使用 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;
   }
@@ -1236,11 +1267,16 @@
       compiler.hooks.emit.tapPromise('ArkMetaJsonGeneratorPlugin', async (compilation) => {
         // 注入环境判断脚本
         const isDev = process.env.NODE_ENV === 'development';
+
+        // 创建 customAssets 数组用于收集自定义资产（如从 HTML 内联 script 提取的代码）
+        const customAssets = [];
+
         await extractArkMetaJson({
           ...useExtractOptions,
           // chunkJsFiles 将从 HTML 中的内联 script 提取，不需要在这里传递
           isDev: isDev,
-          compilation: compilation
+          compilation: compilation,
+          customAssets: customAssets
         });
 
         return Promise.resolve();

package/lib/index.js

@@ -587,8 +587,8 @@ function resetScriptIdx() {
  * @param {IInnerFillAssetListOptions} options
  */
 async function writeInnerText(childDom, fileType, options) {
-  const { homePage, buildDirFullPath } = options;
-  const innerText = getInnerText(childDom);
+  const { homePage, buildDirFullPath, compilation, customAssets = [] } = options;
+  let innerText = getInnerText(childDom);
   if (!innerText) return '';
 
   verbose(`found a user customized ${fileType} tag node in html, try extract its content and write them to local fs`);
@@ -597,7 +597,38 @@ async function writeInnerText(childDom, fileType, options) {
   const fileAbsolutePath = `${buildDirFullPath}/${scriptName}`;
   const fileWebPath = `${slash.noEnd(homePage)}/${scriptName}`;
 
-  await writeFile(fileAbsolutePath, innerText);
+  // 对于 JS 文件，移除或替换 document.write() 调用
+  // 因为异步加载的脚本中不能使用 document.write()
+  if (fileType === 'js') {
+    // 方法1：完全移除 document.write() 调用（推荐）
+    // innerText = innerText.replace(/document\.write\s*\([^)]*\)/g, '');
+
+    // 方法2：用 console.warn 替换 document.write()，保留代码逻辑但避免错误
+    innerText = innerText.replace(
+      /document\.write\s*\(([^)]*)\)/g,
+      'console.warn("[ark-micro] document.write is not allowed in asynchronously loaded scripts:", $1)'
+    );
+    verbose(`Replaced document.write calls in ${scriptName}`);
+  }
+
+  // 在开发模式下，使用 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;
 }
@@ -1241,11 +1272,16 @@ class ArkWebpackPlugin {
     compiler.hooks.emit.tapPromise('ArkMetaJsonGeneratorPlugin', async (compilation) => {
       // 注入环境判断脚本
       const isDev = process.env.NODE_ENV === 'development';
+
+      // 创建 customAssets 数组用于收集自定义资产（如从 HTML 内联 script 提取的代码）
+      const customAssets = [];
+
       await extractArkMetaJson({
         ...useExtractOptions,
         // 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.2",
+  "version": "0.1.4",
   "description": "ark dev utils",
   "repository": {
     "type": "git",

package/src/ArkWebpackPlugin.js

@@ -93,11 +93,16 @@ export default class ArkWebpackPlugin {
     compiler.hooks.emit.tapPromise('ArkMetaJsonGeneratorPlugin', async (compilation) => {
       // 注入环境判断脚本
       const isDev = process.env.NODE_ENV === 'development';
+
+      // 创建 customAssets 数组用于收集自定义资产（如从 HTML 内联 script 提取的代码）
+      const customAssets = [];
+
       const arkMeta = await extractArkMetaJson({
         ...useExtractOptions,
         // chunkJsFiles 将从 HTML 中的内联 script 提取，不需要在这里传递
         isDev: isDev,
-        compilation: compilation
+        compilation: compilation,
+        customAssets: customAssets
       });
 
       return Promise.resolve();

package/src/meta-extractor/fillAssetList.js

@@ -78,8 +78,8 @@ export function resetScriptIdx() {
  * @param {IInnerFillAssetListOptions} options
  */
 async function writeInnerText(childDom, fileType, options) {
-  const { homePage, buildDirFullPath } = options;
-  const innerText = getInnerText(childDom);
+  const { homePage, buildDirFullPath, compilation, customAssets = [] } = options;
+  let innerText = getInnerText(childDom);
   if (!innerText) return '';
 
   verbose(`found a user customized ${fileType} tag node in html, try extract its content and write them to local fs`);
@@ -88,7 +88,38 @@ async function writeInnerText(childDom, fileType, options) {
   const fileAbsolutePath = `${buildDirFullPath}/${scriptName}`;
   const fileWebPath = `${slash.noEnd(homePage)}/${scriptName}`;
 
-  await writeFile(fileAbsolutePath, innerText);
+  // 对于 JS 文件，移除或替换 document.write() 调用
+  // 因为异步加载的脚本中不能使用 document.write()
+  if (fileType === 'js') {
+    // 方法1：完全移除 document.write() 调用（推荐）
+    // innerText = innerText.replace(/document\.write\s*\([^)]*\)/g, '');
+
+    // 方法2：用 console.warn 替换 document.write()，保留代码逻辑但避免错误
+    innerText = innerText.replace(
+      /document\.write\s*\(([^)]*)\)/g,
+      'console.warn("[ark-micro] document.write is not allowed in asynchronously loaded scripts:", $1)'
+    );
+    verbose(`Replaced document.write calls in ${scriptName}`);
+  }
+
+  // 在开发模式下，使用 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/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 {