{"id":19069579,"url":"https://github.com/srect/webpack-loader","last_synced_at":"2026-05-17T04:30:15.794Z","repository":{"id":114173245,"uuid":"366248203","full_name":"sRect/webpack-loader","owner":"sRect","description":"从0到1实现一个webpack loader","archived":false,"fork":false,"pushed_at":"2021-05-11T06:04:15.000Z","size":72,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-02T15:45:21.342Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sRect.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-11T03:50:17.000Z","updated_at":"2021-05-11T06:04:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"e23dc614-f9ec-4c5a-99e2-924333cb0f4d","html_url":"https://github.com/sRect/webpack-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sRect%2Fwebpack-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sRect%2Fwebpack-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sRect%2Fwebpack-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sRect%2Fwebpack-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sRect","download_url":"https://codeload.github.com/sRect/webpack-loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240122573,"owners_count":19751142,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T01:14:49.748Z","updated_at":"2026-05-17T04:30:15.725Z","avatar_url":"https://github.com/sRect.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 从0到1实现一个webpack loader\n\n### 1. 思路\n1. 用`@babel/parser`将文件转换为`AST`抽象语法树\n2. 用`@babel/traverse`找到相应的语法树节点\n3. 用`@babel/types`创建相应的节点\n\n### 2. 示例\n1. 本地开发\n```javascript\nasync function func() {\n  let num = await asyncFunc();\n  console.log(num)\n}\n\nfunc();\n```\n\n2. 打包后自动加上`try catch`\n```javascript\nasync function func() {\n  try{\n    let num = await asyncFunc();\n    console.log(num)\n  }catch(e) {\n    console.log(e)\n  }\n}\n\nfunc();\n```\n3. `async-catch-loader.js`\n```javascript\nconst parser = require(\"@babel/parser\");\nconst traverse = require(\"@babel/traverse\").default;\nconst t = require(\"@babel/types\"); // babel的lodash库\nconst core = require(\"@babel/core\");\n\nmodule.exports = function(source) {\n  let ast = parser.parse(source, {\n    sourceType: \"module\", // 支持 es6 module\n    plugins: [\"dynamicImport\", \"jsx\"], // 支持动态 import\n  });\n\n  traverse(ast, {\n    // 找到await节点\n    AwaitExpression(path) {\n      let tryCatchAst = t.tryStatement(\n        t.blockStatement([t.expressionStatement(path.node)]),\n        // catch子语句\n        t.catchClause()\n      );\n\n      path.replaceWithMultiple([tryCatchAst]);\n    }\n  });\n\n  // 将AST树重新转为代码字符串返回\n  return core.transformFromAstSync(ast).code;\n}\n```\n4. `webpack`中这样使用\n\u003e **注意：** `async-catch-loader`要在`babel-loader`之前使用\n```javascript\nmodules.exports = {\n  resolveLoader: {\n    modules: [\"node_modules\", \"./loaders\"],\n    extensions: [\".js\"],\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        use: [\n          {\n            loader: \"babel-loader\",\n          },\n          {\n            loader: \"async-catch-loader\",\n            options: {\n              catchCode: `alert(e)`,\n            },\n          },\n        ],\n        exclude: /node_modules/,\n      },\n    ]\n  }\n}\n```\n\n### 3. 参考资料\n1. [嘿，不要给 async 函数写那么多 try/catch 了](https://juejin.cn/post/6844903886898069511#heading-3)\n2. [AST explorer](https://astexplorer.net/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrect%2Fwebpack-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsrect%2Fwebpack-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrect%2Fwebpack-loader/lists"}