feat: add module and exports fields in package.json; improve style handling in index.js

scripts/plugin/template/package.json

@@ -17,7 +17,14 @@
     "video",
     "player"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/artplayer-plugin-{{name}}.mjs",
+      "require": "./dist/artplayer-plugin-{{name}}.js"
+    }
+  },
   "main": "dist/artplayer-plugin-{{name}}.js",
+  "module": "./dist/artplayer-plugin-{{name}}.mjs",
   "types": "types/artplayer-plugin-{{name}}.d.ts",
   "legacy": "dist/artplayer-plugin-{{name}}.legacy.js",
   "browserslist": "last 1 Chrome version"

scripts/plugin/template/src/index.js

@@ -10,15 +10,20 @@ export default function {{export}}(option) {
 
 if (typeof document !== 'undefined') {
     const id = 'artplayer-plugin-{{name}}';
-    const $style = document.getElementById(id);
-    if ($style) {
-        $style.textContent = style;
-    } else {
-        const $style = document.createElement('style');
-        $style.id = id;
-        $style.textContent = style;
-        document.head.appendChild($style);
+    let $style = document.getElementById(id)
+    if (!$style) {
+        $style = document.createElement('style')
+        $style.id = id
+        if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => {
+            document.head.appendChild($style)
+        })
+        }
+        else {
+        (document.head || document.documentElement).appendChild($style)
+        }
     }
+    $style.textContent = style
 }
 
 if (typeof window !== 'undefined') {