{"id":26919168,"url":"https://github.com/wsfe/fetool","last_synced_at":"2025-10-11T09:36:16.772Z","repository":{"id":19916890,"uuid":"88257402","full_name":"wsfe/fetool","owner":"wsfe","description":"基于webpack提供了调试，压缩，编译，检查，同步能功能的前端开发工具","archived":false,"fork":false,"pushed_at":"2023-01-01T08:24:56.000Z","size":3411,"stargazers_count":20,"open_issues_count":14,"forks_count":8,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-09-29T01:29:47.210Z","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":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wsfe.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGE.md","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":"2017-04-14T10:11:03.000Z","updated_at":"2025-09-10T18:06:13.000Z","dependencies_parsed_at":"2023-01-13T22:15:18.875Z","dependency_job_id":null,"html_url":"https://github.com/wsfe/fetool","commit_stats":null,"previous_names":["angrytoro/fetool"],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/wsfe/fetool","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wsfe%2Ffetool","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wsfe%2Ffetool/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wsfe%2Ffetool/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wsfe%2Ffetool/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wsfe","download_url":"https://codeload.github.com/wsfe/fetool/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wsfe%2Ffetool/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279006748,"owners_count":26084181,"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","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2025-04-01T21:30:30.100Z","updated_at":"2025-10-11T09:36:16.732Z","avatar_url":"https://github.com/wsfe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# fet\r\nfet是为了解决快速开发，调试，上线用的前端开发工具，基于webpack开发。核心功能是解决了本地开发，线上调试带来的不便，启用了`fet server`,开发者就能安枕无忧的对应开发，测试，线上线下问题，我们在浏览器看到的代码，都是同一套源码，可以方便解决问题。fet除了支持多页应用外，还支持单页应用。只要是遵循fet规范的任何单页应用，都可以用fet支持。fet默认内置了`json-loader`,`html-loader`,详细配置请看下文。\r\n\r\n## fet解决了如下问题：\r\n1. 线上源码与本地源码映射关系（本地代理，类似`fiddler`的匹配替换功能），方便调试\r\n2. 多项目并行开发需要切换启用不同服务不同端口问题\r\n3. 代码快速部署开发机\r\n\r\n## fet设计核心说明\r\n目前fet支持两种模式：多页面和单页面模式,核心引擎是webpack.单页模式采用的是代理的方式，fet只做转发。多页应用模式，fet支持编译，打包。\r\n### 单页模式\r\nfet对单页应用采用的是代理的方式进行支持，也就是说只要单页应用遵循fet的规范，可以让开发者随便配置。fet目前提供了脚手架，支持生成`vue`的单页模板，以及多页应用模板。\r\n### 多页模式\r\n项目当中避免不了多页应用，尤其对于2b系统，几十个页面，有时候多达200个页面（这种系统设计本身就不合理）。webpack如果要配置多页应用，还是挺麻烦的，而且编译的时候很慢。f`et进`行了特殊处理，让开发者在配置多页应用的时候简单方便，同时采用缓存式中间件，以及多进程编译，提升编译速度。\r\n\r\n## 安装\r\nnpm 安装方式安装\r\n```\r\nnpm i -g fet-cli\r\n```\r\nyarn 方式安装\r\n```\r\nyarn global add fet-cli\r\n```\r\n\r\n## 命令说明\r\n请安装fet之后，在命令行运行`fet`查看命令说明，如果对某个命令感兴趣请运行`fet commandName -h`查看。\r\n\r\n### server\r\n用于启动服务器，支持多项目并行开发。\r\n* `-p`:设置服务端口，默认是80\r\n* `-w`:设置需要监听的文件，默认是监听`fet.config.js`以及`build`文件夹。如果要新增可以用逗号隔开，例如：'src/home,base'。\r\n* `-s`:开启HTTPS服务，如果没有配置全局的证书，那么会启用默认证书，默认证书是没有经过认证的，在目前的浏览器，会引起不可预知的错误。因此，建议不要用默认证书。如果需要配置经过认证的证书，请执行`fet config https-key \u003cpath-to-your-key\u003e`，以及`fet config https-crt \u003cpath-to-your-crt\u003e`。\r\n* `-v`:提示server是否显示详细的编译信息，默认不开启。\r\n* `-c`:单页应用的代理配置路径，默认是服务器启动目录下的fet.proxy.conf\r\n\r\n单页应用如果要用上`fet server`，必须在`fet server`的执行目录下面新建代理文件fet.proxy.conf，代理格式请看下面的[代理文件配置](https://github.com/angrytoro/fetool#代理文件配置)\r\n### pack\r\n对代码进行打包，但是不进行编译，可为不同的环境打包代码。\r\n* `-e`:设置要打包的环境，对应的值，是配置文件里面`servers`这个字段对应的配置。可能由于一个项目同时有多个迭代，因此会有多个开发机以及其对应的域名，因此经常需要配置这个环境变量。\r\n* `-m`:打包并压缩代码，与执行`fet build`效果是一样的\r\n* `-c`:编译特殊文件，默认编译html。`fet`支持`include`标签，用户引入公共部分代码，类似`jsp`里面的`include`。\r\n\r\n### build\r\n对代码进行打包并且压缩，同时支持打包分析，给使用者提供代码优化思路。\r\n* `-a`:启用分析，对打包结果进行分析。\r\n* `-c`:开启缓存，默认开启，当值为false时，关闭缓存。\r\n* `-e`:设置要打包的环境，对应的值，是配置文件里面`servers`这个字段对应的配置。可能由于一个项目同时有多个迭代，因此会有多个开发机以及其对应的域名，因此经常需要配置这个环境变量。默认是指向全局的global配置的`domain`配置，如果全局配置也没有，那么默认空。\r\n\r\n### sync \u003cenv\u003e\r\n将代码发送到相应的机器上，必须支持`rsync`。`env`的值是和配置文件里面的`servers`这个字段的配置有关的。\r\n\r\n### config [key] [value]\r\n配置全局变量，目前提供的全局变量配置有如下：\r\n* `https-key`\u0026`https-crt`:这两个配置主要是用于`server`开启HTTPS。\r\n* `user`: 配置`sync`命令中默认的用户名。只要配置了这个，对项目执行`sync`命令，`fet`首先会去匹配`servers`这个配置字段里面对应服务器的`user`字段，如果没有设置，直接使用全局的配置。\r\n* `domain`:配置默认的域名。在`pack`和`build`的时候会用到。主要是用于设置`publicPath`的时候要用。\r\n\r\n### lint\r\n基于[standard](https://github.com/standard/standard)的代码检测命令。对应配置文件里面的`lint`字段。\r\n\r\n### init\r\n\u003e生成项目脚手架\r\n\r\n```cmd\r\nfet init [projectName]\r\n```\r\n* `-t`:设置模板类型，默认是vue\r\n* `-m`:下载多页面模板，默认是否，设置后-type设置的类型无效。\r\n* `-c`:开启clone方式下载模板\r\n\r\n## 配置说明\r\n\r\n```\r\n{\r\n  lint: { // 基于standard的\r\n    cwd: 'src/js', // 选择需要校验的文件路径，默认是src\r\n    opts: {\r\n      ignore: [],   // glob 形式的排除列表 (一般无须配置)\r\n      fix: false,   // 是否自动修复问题\r\n      globals: [],  // 声明需要跳过检测的定义全局变量\r\n      plugins: [],  // eslint 插件列表\r\n      envs: [],     // eslint 环境\r\n      parser: ''    // js 解析器（例如 babel-eslint）\r\n    }\r\n  },\r\n  servers: { // 配置同步到哪台机器\r\n    dev1: {\r\n      host: '127.0.0.1',\r\n      domain: '//dev1.example.com',\r\n      port: 63501,\r\n      local: './', // 默认当前目录\r\n      path: '/usr/local/src/abc', //服务器端要存放的地址\r\n      sudo: false,\r\n      include: ['dev']\r\n    },\r\n    dev2: {\r\n      host: '127.0.0.1',\r\n      domain: '//beta1.example.com',\r\n      port: 63501,\r\n      path: '/usr/local/src/dec',\r\n      sudo: false,\r\n      include: ['dev']\r\n    }\r\n  },\r\n  entryExtNames: { // 告诉`fet`哪些后缀是属于js或者css，fet才能根据这些来选择编译配置\r\n    css: ['.css', '.scss', '.sass', '.less'],\r\n    js: ['.js', '.jsx', '.vue']\r\n  },\r\n  config: {\r\n    exports: [ // 要编译压缩的文件\r\n      \"js/module/home/index.js\",\r\n      \"css/index.css\",\r\n      \"css/base.css\",\r\n      \"css/module/index.less\"\r\n    ],\r\n    webpackConfig: function(jsConfig, cssConfig, options, context) {\r\n    // webpackConfig: function(config, options, context) { // 根据不同的模式，有不同的选择，单页模式，没有cssConfig\r\n      // do what you want todo\r\n      // 当对样式没有特殊配置时，可以直接返回jsConfig就行，否则就要两者都返回。\r\n      return jsConfig; // return {jsConfig: jsConfig, cssConfig: cssConfig};\r\n    }\r\n  }\r\n}\r\n```\r\n# 代理文件配置\r\n``` json\r\n{\r\n  \"projectName\": { // 项目名称要和package.json的name一样\r\n    \"port\": \"8080\" // fet server 要代理的webpack server端口\r\n  }\r\n}\r\n```\r\n\r\n## 其他\r\n如果需要用到数据模拟，可以使用[yapi](https://github.com/YMFE/yapi)或者[easy-mock](https://github.com/easy-mock/easy-mock)，如果需要更复杂的数据模拟，可以使用[mockajax](https://github.com/angrytoro/mockajax)\r\n\r\n\r\n# TODO\r\n[] 添加自动化测试\r\n[] 将es6改成typescript\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwsfe%2Ffetool","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwsfe%2Ffetool","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwsfe%2Ffetool/lists"}