{"id":23385883,"url":"https://github.com/xianjie-li/zero","last_synced_at":"2026-02-25T10:07:50.006Z","repository":{"id":42174224,"uuid":"218961225","full_name":"xianjie-li/zero","owner":"xianjie-li","description":"0配置的react脚手架","archived":false,"fork":false,"pushed_at":"2023-01-05T00:06:23.000Z","size":475,"stargazers_count":4,"open_issues_count":12,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-21T07:26:14.626Z","etag":null,"topics":["cli","multiple-page","react","react-cli"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xianjie-li.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-01T10:07:05.000Z","updated_at":"2023-03-04T04:58:03.000Z","dependencies_parsed_at":"2023-02-03T01:15:37.334Z","dependency_job_id":null,"html_url":"https://github.com/xianjie-li/zero","commit_stats":null,"previous_names":["iixianjie/zero"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/xianjie-li/zero","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xianjie-li%2Fzero","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xianjie-li%2Fzero/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xianjie-li%2Fzero/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xianjie-li%2Fzero/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xianjie-li","download_url":"https://codeload.github.com/xianjie-li/zero/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xianjie-li%2Fzero/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29817195,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-25T05:36:42.804Z","status":"ssl_error","status_checked_at":"2026-02-25T05:36:31.934Z","response_time":61,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["cli","multiple-page","react","react-cli"],"created_at":"2024-12-22T00:29:42.135Z","updated_at":"2026-02-25T10:07:49.987Z","avatar_url":"https://github.com/xianjie-li.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- TOC --\u003e\n\n- [Features](#features)\n- [快速上手](#快速上手)\n  - [安装cli工具](#安装cli工具)\n  - [创建项目](#创建项目)\n  - [开发服务](#开发服务)\n  - [构建生产包](#构建生产包)\n- [快速原型开发](#快速原型开发)\n    - [`创建入口文件`](#创建入口文件)\n    - [`启动开发服务`](#启动开发服务)\n- [添加静态资源](#添加静态资源)\n- [cli命令](#cli命令)\n- [typescript](#typescript)\n- [zero.config.js](#zeroconfigjs)\n- [开发多页面程序](#开发多页面程序)\n- [eslint](#eslint)\n    - [typescript](#typescript-1)\n\n\u003c!-- /TOC --\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://iixianjie.github.io/file-repository/logo/logo.png\" alt=\"ZERO\" /\u003e\n\u003c/p\u003e\n\n\n\n# Features\n\n* 配置和业务文件隔离 ，无须触碰任何一行配置文件即可获得完善的开发体验\n\n* 基于babel plugin的typescript配置，编译更快\n\n* 支持通过配置文件`zero.config.js`对一些非常常用的特性进行自定义配置\n\n* 多页面应用开发\n\n* 不限于react，也可以编写常规js或ts项目\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n# 快速上手\n\n## 安装cli工具\n\n全局安装`zero cli`, 也可以本地安装并使用npx命令。\n\n`npm install @lxjx/zero -g`\n\n\n\n\u003e ⚠ 注意: 由于内置了sass支持，可能会出现node-sass安装报错，可参考以下方式解决\n```shell\n// linux、mac 下\nSASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass\n\n// window 下\nset SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ \u0026\u0026 npm install node-sass\n```\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## 创建项目\n\n安装完成后，切换到你要创建项目的目录，执行`list`命令查看项目类型列表:\n\n```shell\nzero list\n\n# -\u003e 输出如下\nλ zero list\nZERO: template list:\n- js-spa            javascript单页应用\n- ts-spa            typescript单页应用\n- js-mpa            javascript多页应用\n- ts-mpa            typescript多页应用\n```\n\n\n\n然后根据你想要创建的项目类型：\n\n```shell\nzero create ts-spa my-zero-app\n```\n\n创建完成后，进入项目目录执行`npm install`安装依赖并允许开发服务即可进行开发\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n## 开发服务\n\n完成依赖安装后，通过以下命令启动开发服务\n\n```shell\nyarn start\n\n# 对应package.json中的start命令\n\"scripts\": {\n\t\"start\": \"zero start\",\n}\n```\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n## 构建生产包\n\n```shell\nyarn build\n\n# 对应package.json中的build命令\n\"scripts\": {\n\t\"start\": \"zero start\",\n}\n```\n\n编译完成后，生成文件在根目录dist夹下\n\n\n\n# 快速原型开发\n\n如果全局安装zero，可以通过直接指定入口文件和模板文件来启动服务或编译生产文件，非常适合写一些demo或原型。\n\n\u003cbr /\u003e\n\n### `创建入口文件`\n\n在工作目录新建以下文件:\n\n\u003e 模板文件支持html和pug, 这里你也可以使用index.pug\n\n**index.html**\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003ctitle\u003eDocument\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n\n```\n\n**main.js** \n\n\u003e 支持js、jsx，如果开启了typescript支持，它还可以是ts、tsx。如果不使用react，你也可以用它打包普通js文件。\n\n```js\ndocument.getElementById('root').innerHTML = 'hello world';\n```\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n###  `启动开发服务`\n\n在这里，start后的两个参数分别用于指定入口文件和模板文件。\n\n\u003e 默认的入口文件是 cwd()/src/main , 模板文件是cwd()/index.html，如果按此规则放置文件，则可以省略命令为  `npx zero start`  \n\u003e\n\u003e 💡 cwd() 为你的工作目录\n\n```shell\nnpx zero start ./main.js ./index.html\n```\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n# 添加静态资源\n\n这里的静态资源指的是不想通过webpack进行打包的项目文件，默认约定它们存放于`cwd()/public/`目录中，让我们来测试它。\n\n```shell\nmkdir public\n```\n\n添加一些静态资源到public目录下, 现在我们的目录如下\n\n```shell\n├─ node_modules\n├─ index.jsx\n├─ index.module.scss\n├─ index.html\n├─ logo.jpg\n├─ package.json\n└─ public\n\t├─ lodash.4.5.0.js\n```\n\n**模板文件中使用**\n\n您可以在模板文件中这样访问它, (请确保一定要使用PUBLIC变量，因为PUBLIC目录根据开发模式以及配置的不同是会时刻改变的)\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003ctitle\u003eDocument\u003c/title\u003e\n+  \u003cscript src=\"\u003c%= PUBLIC %\u003e/lodash.4.5.0.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n\n```\n\n如果模板使用的是pug则使用如下\n\n```jade\ndoctype html\nhtml(lang=\"zh-CN\")\n  head\n  \tmeta(charset=\"UTF-8\")\n    title Document\n    script(src=\"#{PUBLIC}/lodash.4.5.0.js\")\n\n  body\n    #root\n```\n\n**js文件中使用**\n\n```js\nimg.setAttribute('src', `${PUBLIC}/xxx.jpg`) // 直接通过环境变量‘PUBLIC’\n```\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n# cli命令\n\n安装zero后，可以通过`zero -h`查看帮助信息, 要查看对应命令的帮助信息，使用`zero \u003ccommond\u003e -h`，如`zero start -h`。\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n# typescript\n\n使用`zero craete ts-spa projectName` 进行typescript项目创建\n\n💡 项目根目录存在tsconfig.json文件即视为开启typescript\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n# zero.config.js\n\n通过项目根目录的zero.config.js, 可以对一些常用的配置项进行配置,  以下为默认配置\n\n```js\n\nconst defaultConfig = {\n  publicPath: '/', // 资源访问路径, 当需要编译后的文件能本地直接访问时，可以设置为./\n  publicDirName: 'public', // 公共资源文件夹，存放不想通过webpack编译的东西，打包后所有打包产物和该目录下的文件会被移动outputPath下的同名目录下\n  outputPath: './dist', // 文件打包到此目录, 以当前工作目录为根目录\n\n  entry: './src/main', // 默认入口文件位置，只在没有设置pages的情况下生效\n  template: './index.html', // 默认模板文件位置，只在没有设置pages的情况下生效\n\n  /**\n   * 开启多页面支持\n   * 开启后，会以指定规则读取cwd()/src/pages下的文件作为入口，规则如下:\n   * 1. 以第一级目录下的直接子目录名作为入口名\n   * 2. 将作为入口名目录下的同名(jsx?|tsx?)文件作为入口文件，同名的(pug|html)文件作为模板文件\n   * 3. pageInfo.(js|ts)中的导出会作为模板变量(pageInfo)传入模板文件中，可以使用对应的模板语法获取\n   * 4. 直接子目录下的js以'_'开头进行命名可以避免改文件被误识别为入口文件，直接子目录内部的任何子目录不受以上规则影响\n   * */\n  pages: false, // 支持命令行\n\n  /** 存在pageIncludes 且 length \u003e 0时，只有该配置内指定的入口会生效，如['user', 'about']。当页面过多时可以在开发时进行配置以提升编译速度 */\n  // pageIncludes: [],\n\n  mock: false, // dev模式下使用, 开启mock服务, 支持命令行\n\n  proxy: {}, // 配置dev-server代理\n    \n  // 配置一些环境变量\n  env: {\n    // development: { /* 请勿使用PUBLIC作为key，因为它已经被占用 */ },\n    // production: { /* 请勿使用PUBLIC作为key，因为它已经被占用 */ }\n  },\n  host: '0.0.0.0', // dev模式下使用, 支持命令行\n  hash: true, // 打包时为文件生成hash\n  htmlHash: false, // 打包时给html的引用资源打上hash(src=\"/app/app.js?6d635080fd6cd30bb150\") 默认dev模式下默认开启，build模式自动关闭。可以通过此选项强制开启\n  gzip: true, // 是否开启gzip，支持命令行\n  analyzer: true, // 是否分析包大小，支持命令行\n  dropConsole: true, // 是否在打包时移除console，支持命令行\n  sass: { // 传递给sass-loader的options\n    // prependData: '@import \"@/style/_base/index.scss\";',\n    sassOptions: {\n      // data: '@import \"@/style/_base/index.scss\";',\n      precision: 3\n    }\n  },\n  less: {\n    javascriptEnabled: true,\n  }, // 传递给less-loader的options\n  pug: {}, // 传递给pug-loader的options\n  extensions: ['.ts', '.tsx', '.js', '.jsx'],\n  alias: { // 同webpackOptions.alias\n    '@': path.resolve(process.cwd(), './src')\n  },\n  /* 工作目录根目录存在tsconfig.json时视为开启typescript支持 */\n\n  // 可通过此方法简单的自定义webpack配置, 请确保将修改后的config正确返回\n  configWebpack(webpackConfig, { isDevelopment, isProduction }) {\n    // if (!this.pages \u0026\u0026 isProduction) {\n    //   webpackConfig.output.filename = 'myApp.js';\n    // }\n    return webpackConfig;\n  },\n  /**\n   *  添加额外的babel预设和插件\n   *\n   *  # 默认配置\n   *  presets:\n   *  @babel/preset-env\n   *  @babel/preset-react\n   *\n   *  # plugins\n   *  @babel/plugin-transform-runtime\n   *  @babel/plugin-proposal-optional-chaining\n   *  @babel/plugin-proposal-class-properties\n   *  @babel/plugin-proposal-decorators\n   *  @babel/plugin-syntax-dynamic-import\n   *  react-hot-loader/babel\n   *  styled-jsx/babel -\u003e styled-jsx-plugin-sass\n   *\n   *  # 当开启了ts时, 额外包含\n   *  @babel/preset-typescript\n   *  */\n  babel: {\n    presets: [],\n    plugins: [],\n  },\n  /* 额外的babel-loader include列表 */\n  extraBabelIncludes: [],\n};\n```\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n# 开发多页面程序\n通过以下配置，可以开启多页面支持\n\n```shell\npages: true,\n```\n\n开启后，会以指定规则读取cwd()/src/pages下的文件作为入口，规则如下:\n\n1. 以第一级目录下的直接子目录名作为入口名\n\n2. 将作为入口名目录下的同名(jsx?|tsx?)文件作为入口文件，同名的(pug|html)文件作为模板文件\n\n3. pageInfo.(js|ts)中的导出会作为模板变量(pageInfo)传入模板文件中，可以使用对应的模板语法获取\n\n4. 直接子目录下的js以'_'开头进行命名可以避免改文件被误识别为入口文件，直接子目录内部的任何子目录不受以上规则影响\n\n\n\npages目录结构如下：\n\n```css\n└─ pages\n\t└─ index\n\t\t├─ index.js\n\t\t├─ index.html\n\t\t├─ pageInfo.js // 可选，导出的数据会作为模板变量传入index.html中\n\t└─ about\n\t\t├─ about.js\n\t\t├─ about.pug // 可以两种模板语法混合使用\n\t\t\n\t\n```\n\n\n\n\u003e  你可以直接使用命令行`zero create ts-mpa`创建多页应用骨架\n\u003e\n\u003e  当页面很多时，可以通过pageIncludes配置来避免对当前开发环节外的页面进行编译，从而提高编译速度\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n# eslint \n\n首先，不推荐使用webpack来检测代码风格，只要确保目录下包含eslint配置文件，然后正确的安装了对应依赖，即可通过vscode或idea获得eslint检测，编辑器对错误的提示比控制台更加直观且不会造成编辑器和webpack同时检测代码风格引起的性能浪费。\n\n如果你使用cli来生成项目的话，确保你的编辑器开启了eslint即可，其他的一切都是开箱式的。\n\n\n\n### typescript\n\n通过eslint和typescript插件可以获得非常好的代码风格支持。如果你通过cli创建的ts项目，那这也是默认支持的。\n\n* 不要使用tslint，它的规则相对较少并且仓库正在跟eslint进行合并。\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxianjie-li%2Fzero","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxianjie-li%2Fzero","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxianjie-li%2Fzero/lists"}