feat: 新增packagejson文件解析

example/demo3/index.html

@@ -14,7 +14,8 @@
   Compiler.createApp('./react/main.tsx').mount('#root')
 
   // vue项目
-  Compiler.createApp('./vue/main.js').mount('#app')
+  Compiler.createApp('./vue/main.js','./vue/package.json').mount('#app')
+
 </script>
 </body>
 </html>

example/demo3/react/App.tsx

@@ -1,4 +1,8 @@
+import { random } from 'lodash-es'
+
 export const App = () => {
+  console.log(random(0, 10))
+
   return (
     <div>
       <h1>我是凤雏 react!</h1>

example/demo3/react/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "sb-react",
+  "version": "0.0.1",
+  "private": true,
+  "dependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "lodash-es": "4.17.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "react-scripts": "latest",
+    "@types/react": "18.2.57",
+    "@types/react-dom": "18.2.19"
+  }
+}

example/demo3/vue/comp/btn.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { random } from 'lodash-es'
 
 const count = ref<number>(0)
+
+console.log(random(1, 10))
 </script>
 
 <template>

example/demo3/vue/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "sb-vue",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "vue": "^3.3.4",
+    "lodash-es": "^4.17.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.4.0",
+    "@vue/cli-plugin-eslint": "^4.4.0",
+    "@vue/cli-service": "^4.4.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "vue-template-compiler": "^2.6.11"
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainetian/esbuild-wasm-compiler",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "private": false,
   "description": "File Resolution for Esbuild running in the Browser",
   "keywords": [

src/compiler/compiler.ts

@@ -7,11 +7,17 @@ export interface FilesResolver {
   getFileContent(path: string): Promise<string> | string
 }
 
+export interface IPackageJson {
+  dependencies?: Record<string, string>
+
+  [propName: string]: any
+}
+
 export interface CompilerOptions extends esbuild.InitializeOptions {
   /**
    * package.json文件内容
    */
-  packageJson?: Record<string, any>
+  packageJson?: IPackageJson
 }
 
 /**
@@ -46,7 +52,7 @@ export class Compiler {
       })
   }
 
-  private async onResolveCallback(args: esbuild.OnResolveArgs) {
+  private async onResolveCallback(args: esbuild.OnResolveArgs, pkgJson?: IPackageJson) {
     if (args.kind === 'entry-point') {
       return { path: '/' + args.path }
     }
@@ -54,10 +60,10 @@ export class Compiler {
       // 第三方依赖包
       if (!args.path.startsWith('.')) {
         let modulePath = ''
-        const packageJson = this.options?.packageJson
+        let packageJson = pkgJson || this.options?.packageJson
         if (packageJson) {
           const dependencies = packageJson.dependencies
-          modulePath = getEsmUrl(dependencies, args.path)
+          modulePath = getEsmUrl(dependencies || null, args.path)
           if (modulePath.endsWith('.css')) {
             return {
               path: '/' + modulePath,
@@ -105,7 +111,11 @@ export class Compiler {
     return { contents, loader }
   }
 
-  public async compile(entryPoint: string, options: esbuild.BuildOptions = {}) {
+  public async compile(
+    entryPoint: string,
+    options: esbuild.BuildOptions = {},
+    packageJson?: IPackageJson
+  ) {
     while (!this.initialized) {
       // Wait until initialization is complete
       await new Promise((resolve) => setTimeout(resolve, 16))
@@ -119,7 +129,9 @@ export class Compiler {
           {
             name: 'browserResolve',
             setup: (build) => {
-              build.onResolve({ filter: /.*/ }, async (args) => this.onResolveCallback(args))
+              build.onResolve({ filter: /.*/ }, async (args) =>
+                this.onResolveCallback(args, packageJson)
+              )
               build.onLoad({ filter: /.*/ }, (args) => this.onLoadCallback(args))
             },
           },
@@ -149,7 +161,7 @@ export class Compiler {
     }
   }
 
-  public static createApp(path: string) {
+  public static createApp(path: string, packageJsonPath?: string) {
     if (!Compiler.instance) {
       Compiler.instance = new Compiler({
         getFileContent: async (path) => {
@@ -181,7 +193,16 @@ export class Compiler {
       if (!root) {
         throw new Error('Root element not found')
       }
-      const code = await Compiler.instance?.compile(path)
+      // 获取package.json文件内容
+      let packageJson
+      if (packageJsonPath) {
+        const packageJsonText = await fetch(`${packageJsonPath}`).then((res) => {
+          if (!res.ok) throw new Error('File not found')
+          return res.text()
+        })
+        packageJson = JSON.parse(packageJsonText)
+      }
+      const code = await Compiler.instance?.compile(path, {}, packageJson)
       if (code && typeof code !== 'string' && code.error) {
         root.innerHTML = code.message
         return