Bye-react - 把 React 转成 Preact 的命令行工具

阅读 231
收藏 0

Made by @colinmcd94

Migrate your project from React to Preact with a single command. More specifically, this tool switches the project over to preact-compat, the "compatibility layer that makes React-based modules work with Preact, without any code changes". After running the command below, no code changes should be necessary for your project to run successfully.


  1. Requires usage of Webpack, Browserify, or the Babel React preset (or any combination thereof). If you don’t use any of these, this won't work. Also you should probably be using one of these.
  2. Not guaranteed to work in all cases. You should be using a version of React that is compatible with the current stable release (@15.6.1). May interact in interesting and unfortunate ways with non-standard build pipelines (e.g. if you dynamically generate .babelrc or package.json, etc).
  3. Will delete comments inside package.json and .babelrc files. These files contain JSON-compliant data. To add the aliases, bye-react reads in the JSON, modifies it, and writes it back to disk. Comments are lost en route. If these are important to you then don't use bye-react.



npm install -g bye-react


yarn global add bye-react


cd ~/your/react/project



When you first run bye-react backups are made of all config files modified by this tool. Running these undo commands restores these files to their original state. It also uninstalls preact and reinstalls react and react-dom. bye-react -u


bye-react --undo

How It Works

  1. Uninstalls react and react-dom.
  2. Installs preact and preact-compat (obviously) via npm (or yarn, if a Yarn lockfile is detected)
  3. Checks for usage of Webpack. If detected, an alias is added to webpack.config.js. Specifically these lines are appended to the end of the file.
  4. Checks for usage of Babel’s React preset. If detected, babel-plugin-module-resolver is installed and used to create an alias in .babelrc
  5. Checks for usage of Browserify. If detected, aliasify is installed and used to create an alias in package.json.