{"id":24511582,"url":"https://github.com/dacejs/babel-plugin-syntax-import-async-component-sync","last_synced_at":"2025-03-15T09:44:10.068Z","repository":{"id":72114881,"uuid":"137859967","full_name":"dacejs/babel-plugin-syntax-import-async-component-sync","owner":"dacejs","description":"将 `import()` + `asyncComponent` 异步 react 组件加载转化为同步组件的 babel 语法插件。","archived":false,"fork":false,"pushed_at":"2018-06-19T10:21:13.000Z","size":10,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-22T00:39:41.872Z","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/dacejs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2018-06-19T08:06:20.000Z","updated_at":"2020-12-30T14:53:04.000Z","dependencies_parsed_at":"2023-06-12T22:17:06.208Z","dependency_job_id":null,"html_url":"https://github.com/dacejs/babel-plugin-syntax-import-async-component-sync","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dacejs%2Fbabel-plugin-syntax-import-async-component-sync","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dacejs%2Fbabel-plugin-syntax-import-async-component-sync/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dacejs%2Fbabel-plugin-syntax-import-async-component-sync/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dacejs%2Fbabel-plugin-syntax-import-async-component-sync/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dacejs","download_url":"https://codeload.github.com/dacejs/babel-plugin-syntax-import-async-component-sync/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243713391,"owners_count":20335566,"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":"2025-01-22T00:38:52.344Z","updated_at":"2025-03-15T09:44:10.058Z","avatar_url":"https://github.com/dacejs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# babel-plugin-syntax-import-async-component-sync\n\n一个将 `import()` + `asyncComponent` 异步 react 组件加载转化为同步组件的 babel 语法插件，需要和 `babel-plugin-syntax-dynamic-import` 配合使用。\n\n在 webpack 做前后端同构的工程中，`router.js` 也是同构的，这个文件会在服务器端和浏览器端分别被调用。\n\n为了让前端代码拆分打包，`router.js` 通常会用 `import()` 来做动态加载（其实就是 webpack 的 code-splitting 拆分标示），而为了让拆分的代码（通常是一个页面组件）在渲染前获取到组件初始化的数据，我们会封装一个高阶组件来调用页面组件，同时在高阶组件中完成异步数据获取工作。\n\n这里 `import()` + `asyncComponent` 就存在一个矛盾：\n- 浏览器端渲染时希望执行的异步请求和渲染\n- 服务器端渲染时希望执行的是同步请求和渲染，只有同步，服务器才能渲染首页网页并将获取的数据拍到 HTML 中，以确保浏览器端的 redux 和服务器端的 redux 保持一致。\n\n为了屏蔽前后端的代码差异，故使用该插件做代码转换\n- 浏览器端代码使用 `babel-plugin-syntax-dynamic-import` 转换，让 `webpack` 支持 `import()`\n- 服务器端代码使用该插件转换，让 `node` 支持 `import()` 并执行同步操作\n\n## 安装\n```\nnpm i babel-plugin-syntax-import-async-component-sync\n```\n\n## 用法\n\n### .babelrc (推荐)\n```json\n{\n  \"env\": {\n    \"client\": {\n      \"plugins\": [\n        \"syntax-dynamic-import\"\n      ]\n    },\n    \"server\": {\n      \"plugins\": [\n        \"syntax-import-async-component-sync\"\n      ]\n    }\n  }\n}\n```\n\n### CLI\n```\n$ babel --plugins syntax-import-async-component-sync script.js\n```\n\n### Node API\n```js\nrequire('babel-core').transform('code', {\n  plugins: ['syntax-import-async-component-sync']\n});\n```\n\n## 示例代码\n### routes.js 源文件\n```js\nimport App from './layout/App';\nimport asyncComponent from './components/AsyncComponent';\nimport NotFoundPage from './pages/NotFoundPage';\n\nexport default [\n  {\n    component: App,\n    routes: [\n      {\n        path: '/',\n        exact: true,\n        component: asyncComponent(() =\u003e import(/* webpackChunkName: \"home\" */'./pages/HomePage'))\n      },\n      {\n        path: '/users',\n        component: asyncComponent(() =\u003e import(/* webpackChunkName: \"users\" */'./pages/UsersListPage'))\n      },\n      {\n        path: '/posts',\n        component: asyncComponent(() =\u003e import(/* webpackChunkName: \"posts\" */'./pages/PostsListPage'))\n      },\n      {\n        component: NotFoundPage\n      }\n    ]\n  }\n]\n```\n\n### 服务器端转换后的代码\n```js\nimport App from './layout/App';\nimport asyncComponent from './components/AsyncComponent';\nimport NotFoundPage from './pages/NotFoundPage';\n\nexport default [{\n  component: App,\n  routes: [{\n    path: '/',\n    exact: true,\n    component: function () {\n      const component = require('./pages/HomePage');\n      return component.default || component;\n    }()\n  }, {\n    path: '/users',\n    component: function () {\n      const component = require('./pages/UsersListPage');\n      return component.default || component;\n    }()\n  }, {\n    path: '/posts',\n    component: function () {\n      const component = require('./pages/PostsListPage');\n      return component.default || component;\n    }()\n  }, {\n    component: NotFoundPage\n  }]\n}];\n```\n\n### 浏览器端转换后的代码\n```js\nimport App from './layout/App';\nimport asyncComponent from './components/AsyncComponent';\nimport NotFoundPage from './pages/NotFoundPage';\n\nexport default [{\n  component: App,\n  routes: [{\n    path: '/',\n    exact: true,\n    component: asyncComponent(() =\u003e Promise.resolve().then(() =\u003e require('./pages/HomePage')))\n  }, {\n    path: '/users',\n    component: asyncComponent(() =\u003e Promise.resolve().then(() =\u003e require('./pages/UsersListPage')))\n  }, {\n    path: '/posts',\n    component: asyncComponent(() =\u003e Promise.resolve().then(() =\u003e require('./pages/PostsListPage')))\n  }, {\n    component: NotFoundPage\n  }]\n}];\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdacejs%2Fbabel-plugin-syntax-import-async-component-sync","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdacejs%2Fbabel-plugin-syntax-import-async-component-sync","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdacejs%2Fbabel-plugin-syntax-import-async-component-sync/lists"}