Merge pull request transitive-bullshit#258 from DDDDDanica/feature/doc

feat: improve chinese document and update it

Author: transitive-bullshit

.gitignore

@@ -22,3 +22,7 @@ yarn-error.log*
 # temp directories created during testing
 my-test-library
 nala
+
+# editor
+.vscode
+.idea

readme.md

@@ -153,7 +153,7 @@ Here are some example libraries that have been bootstrapped with `create-react-l
 - [react-editext](https://github.com/alioguzhan/react-editext) - Editable Text Component.
 - ... and hundreds more!
 
-Want to see a more completed list? Check out [Made with CRL](https://made-with-crl.netlify.com/)
+Want to see a more completed list? Check out [Made with CRL](https://made-with-crl.netlify.com/).
 
 Want to add yours to the list? Submit an [PR](https://github.com/HurricaneInteractive/made-with-crl#adding-a-library) at the _Made with CRL_ repository.
 

readme.zh-CN.md

@@ -1,131 +1,152 @@
 # create-react-library
-
-> 一个命令行(CLI)工具, 使用一个命令就可以为你创建一个基于 Rollup 的 React 库作为你开源项目的基础.
+CLI for creating reusable, modern React libraries using Rollup and create-react-app.
+> 这是一个 CLI 工具，借此您可以使用 Rollup 和 create-react-app 创建一个现代的，并可以可重复使用的您自己的 React 库（libraries)。
 
 [![NPM](https://img.shields.io/npm/v/create-react-library.svg)](https://www.npmjs.com/package/create-react-library) [![Build Status](https://travis-ci.org/transitive-bullshit/create-react-library.svg?branch=master)](https://travis-ci.org/transitive-bullshit/create-react-library) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
-## 介绍
-
-**这个命令行工具(CLI)目的是让你可以简单的制作你自己的 React 库或组件**
+## 简介
 
 <p align="center">
   <img width="600" src="https://cdn.rawgit.com/transitive-bullshit/create-react-library/master/media/demo.svg">
 </p>
 
-这个命令行工具(CLI)基于 [boilerplate](https://github.com/transitive-bullshit/react-modern-library-boilerplate), 相关文章在[这里](https://hackernoon.com/publishing-baller-react-modules-2b039d84bce7).
-
 ## 功能
 
-- 基于 CLI 使用简单
-- 创建了超过 2000 个公开的项目!!
-- 包含了所有流行的 js 功能
-- 同时支持`cjs`和`es`模块格式
-- 使用[create-react-app](https://github.com/facebookincubator/create-react-app)为你的库创建示例相当容易
-- [Rollup](https://rollupjs.org/)构建支持
-- [Babel](https://babeljs.io/) 转换支持
-- [Jest](https://facebook.github.io/jest/) 测试支持
-- 支持复杂的 peer-dependencies 依赖
-- 支持 CSS modules
-- 支持 Sourcemap
-- 完善的文档 :heart_eyes:
+- 容易上手的 CLI
+- 处理所有流行的 JS 功能
+- 打包了 commonjs 和 es 模块的格式
+- 使用 [create-react-app](https://github.com/facebookincubator/create-react-app) 作为案例演示和本地开发
+- 使用 [Rollup](https://rollupjs.org/) 来打包
+- 使用 [Babel](https://babeljs.io/) 来转码
+- 使用 [Jest](https://facebook.github.io/jest/) 进行测试
+- 支持复杂的同等依赖（peer-dependencies）
+- 支持 CSS 模块（modules）
+- 可以支持 TypeScript
+- 创建 Sourcemap
+- 上千个开源模块
+- 贴心的文档 😍
+- [中文文档参考](./readme.zh-CN.md) by [@monsterooo](https://github.com/monsterooo)
+
+## 全局安装
+
+此安装包必须依赖 `node 版本大于或者等于 10`。
 
-## 安装
+```bash
+npm install -g create-react-library
+```
 
-这个包必须依赖 `node >= 4`, 但是我们推荐 `node >= 8`.
+## 使用 npx
 
 ```bash
-npm install -g create-react-library
+npx create-react-library
 ```
+_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) 通常要求 npm 5.2+ 或者更高版本, 详情请参考 [关于较低 npm 版本的说明](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_
 
 ## 创建一个新的模块
 
 ```bash
 create-react-library
 ```
 
-根据提示输入你模块的基本信息，然后 CLI 将会执行以下步骤
+根据提示，输入你想创建模块的一些基本信息，然后 CLI 将会执行以下步骤：
 
-- 将模板复制到新创建的文件夹中
-- 通过 yarn 或 npm 安装依赖
-- 通过 npm 的 link 链接包到本地, 方便开发调用
+- 将模板复制到 template 中
+- 通过 yarn 或 npm 安装依赖包
+- 将安装包一起链接到本地开发中
 - 初始化本地 git 仓库
 
-这个时候，你的新模块目录应该和下面的截图差不多。这些所有的设置都是为了更友好的进行本地开发
+在这个时候，你的新模块目录应该和下面的截图一直，这是本地开发的所有需要的设置啦。
 
 <p align="center">
   <img width="600" src="https://cdn.rawgit.com/transitive-bullshit/create-react-library/master/media/tree.svg">
 </p>
 
 ## 开发
 
-本地开发分为两个部分.
+我们将本地开发分成两个部分（推荐开启两个 tabs)。
 
-首先, 你可以运行 rollup 去监听你的`src/`模块, 当你有任何更改会自动编译到`dist/`
+首先, 运行 rollup 可以监听你的 `src/` 模块, 当你有做出任何变更的时候会自动编译到 `dist/` 中。
 
 ```bash
-npm start # 运行rollup和监听更改
+npm start # 运行 rollup 并且监听变更
 ```
 
-然后, 在本地开发中需要在`example/`目录中链接你的模块
+第二步就是运行 create-react-app 创建的 `example/` 文件，它使用了您开发的模块的最新版本。
 
 ```bash
-# (打开新的终端窗口中)
+# (在一个新的终端窗口中运行)
 cd example
-npm link <your-module-name> # 如果使用yarn可以跳过这步
-npm start # 运行 create-react-app dev server 可以开你的示例程序
+npm start # runs create-react-app dev server
 ```
 
-现在, 当你对库的`src/`目录或演示程序的`example/src`目录有任何更改, `create-react-app`会重新加载本地开发服务, 这样就能很愉快的对你的组件进行快速开发迭代.
+现在, 若你改变 `src/` 或演示项目下 `example/src` 的任何内容, `create-react-app` 会实时地加载本地开发的服务器, 您可以借此来实时迭代开发您的组件。
 
 ![](https://media.giphy.com/media/12NUbkX6p4xOO4/giphy.gif)
 
-#### 发布到 NPM
-
-将库发布到 **npm** 时请务必要确保所有的依赖模块已经正确添加在了`peerDependencies`中, rollup 会自动识别`peerDependencies`配置选项, 而不会将它捆绑在你的模块中(或者可以叫他外部依赖).
-
-然后就可以愉快的发布拉
+#### 发布到 npm 中
 
 ```bash
-# 注意下面的命令会编译`commonjs`和`es`的版本到你模块的dist/目录中
 npm publish
 ```
 
-#### Github Pages
+您会发现此命令创建了 `commonjs` 和 `es` 版本的模块，然后把您的模块发布到 `npm`。
+
+请务必要确保您将任何同等依赖（peer dependencies）的 npm 模块正确地加入到 `package.json` 中的 `peerDependencies`里。这样一来 rollup 将它们识别为同等依赖，而不会将它们打包到您的模块中。 
 
-将示例部署到 github pages 相当简单, 我们需要先给 example 编译一个生产版本, 这个 example 用于演示你的库. 然后运行 gh-pages 来部署生成的 bundle 文件到 github.
+然后就可以愉快的发布拉
+
+#### 部署到 Github 页面中
 
 ```bash
 npm run deploy
 ```
+这行命令会创建一个生产环境下的 example `create-react-app` 文件，这样能够展示您的库，然后请运行 `gh-pages` 来部署最终的打包文件。
+
+## 使用 React Hooks
+如果您在项目中使用 [react-hooks](https://reactjs.org/docs/hooks-intro.html)，当您调试 example 项目时，您会遇到一个问题 [Invalid Hook Call Warning](https://reactjs.org/warnings/invalid-hook-call-warning.html)。
+此 [问题](https://github.com/facebook/react/issues/14257) 解释了其中的缘由，我们的库和文档使用了一个不同的实例，而我们的解决方案是重写您 example 中的 `react` 路径为"file:../node_modules/react"或者'link:../node_modules/react'。
 
-## 使用例子
+## 一些例子
 
-### 导出多个命名
+### 导出多个文件名
 
-这个[分支](https://github.com/transitive-bullshit/react-modern-library-boilerplate/tree/feature/multiple-exports)演示了如何导出多个命名的方法. 在这个分支的模块中导出了两个组件`Foo`和`Bar`, 然后展示他们怎么在 example 中进行调用的.
+查看此 [branch](https://github.com/transitive-bullshit/react-modern-library-boilerplate/tree/feature/multiple-exports) 可以参考多个命名导出的方法。此模块中导出了两个组件，分别为 `Foo` 和 `Bar`, 以及如何在 example 中调用它们。
 
 ### Material-UI
 
-这个分支[branch](https://github.com/transitive-bullshit/react-modern-library-boilerplate/tree/feature/material-ui)演示了如何使用`peerDependencies`来构建需要依赖外部[material-ui](https://github.com/mui-org/material-ui)的库. 它展示了[rollup-plugin-peer-deps-external](https://www.npmjs.com/package/rollup-plugin-peer-deps-external)强大的`peerDependencies`依赖功能. 它可以轻松的依赖 material-ui 但又无需将它绑定到当前模块中.
+查看此 [branch](https://github.com/transitive-bullshit/react-modern-library-boilerplate/tree/feature/material-ui) 可以参考如何使用一个相对复杂一些的同等依赖，[material-ui](https://github.com/mui-org/material-ui)。 利用 [rollup-plugin-peer-deps-external](https://www.npmjs.com/package/rollup-plugin-peer-deps-external) 强大的功能，可以轻松的创建一个可重复使用的模块，它包含了复杂的同等依赖，但是不需要作为您模块的部分一起打包。
+
+### Boilerplate
+
+本 CLI 基于此 [boilerplate](https://github.com/transitive-bullshit/react-modern-library-boilerplate)，您也可以选择性地阅读 [此文档](https://hackernoon.com/publishing-baller-react-modules-2b039d84bce7)。
 
 ### 开源库
 
-下面是一些使用`create-react-library`引导来创建的开源库的成功例子.
+下面是一些使用 `create-react-library` 引导来创建的一些库的例子。
 
-- [tabler-react](https://github.com/tabler/tabler-react) - React 实现的 Tabler UI 组件
-- [react-background-slideshow](https://github.com/transitive-bullshit/react-background-slideshow) - React 创建背景性感的瓦片幻灯片效果 🔥
+- [tabler-react](https://github.com/tabler/tabler-react) - React Tabler UI 组件和展示。
+- [react-background-slideshow](https://github.com/transitive-bullshit/react-background-slideshow) - React 创建背景性感的幻灯片效果 🔥
 - [react-starfield-animation](https://github.com/transitive-bullshit/react-starfield-animation) - React 创建基于 Canvas 的星空动画 ✨
 - [react-particle-effect-button](https://github.com/transitive-bullshit/react-particle-effect-button) - React 创建的爆破粒子按钮效果 🎉
 - [react-particle-animation](https://github.com/transitive-bullshit/react-particle-animation) - React 创建基于 Canvas 的粒子动画 🌐
 - [react-block-image](https://github.com/transitive-bullshit/react-block-image) - React 中通过使用`div`替换`img`来获得更多的控制 🌃
 - [react-mp3-recorder](https://github.com/transitive-bullshit/react-mp3-recorder) - React 实现的使用麦克风来记录 mp3 音频 🎵
 - [react-before-after-slider](https://github.com/transitive-bullshit/react-before-after-slider) - React 创建的两个图片比较的库.
-- [worldwind-react-globe](https://github.com/emxsys/worldwind-react-globe) - React 实现的 NASA WorldWind
+- [worldwind-react-globe](https://github.com/emxsys/worldwind-react-globe) - React 实现的 NASA 虚拟地球组件。
 - [react-shimmer](https://github.com/gokcan/react-shimmer) - 加载图片时使用一个闪光的效果.
+- [react-login-modal-sm](https://github.com/Silind/react-login-modal-sm) - 定制的 React 社交平台登录模态框（modal）。
+- [react-gradient-scroll-indicator](https://github.com/jbccollins/react-gradient-scroll-indicator) - 封装了带渐变效果的内容的滚动。
+- [react-editext](https://github.com/alioguzhan/react-editext) - 可编辑的 Text 组件。
+- ... 以及上百个更多的！
+
+有兴趣查看更复杂的列表? 请查看 [Made with CRL](https://made-with-crl.netlify.com/)。
+
+想把您的项目添加到我们的列表中吗？欢迎在 _Made with CRL_ 库中提交一个 [PR] (https://github.com/HurricaneInteractive/made-with-crl#adding-a-library)。
 
-如果你想添加你的库到列表中, 欢迎提交 [issue](https://github.com/transitive-bullshit/create-react-library/issues/new)!
+## Notice
+现如今我的主要开源的精力集中在 [Saasify](https://github.com/saasify-sh/saasify)，所以我无法投资太多精力到维护此 CRL 中。我一直在为项目寻找想成为一个积极的维护者的志愿者。如果您有兴趣的话，私信我把。
 
-## License
+## 证书
 
 MIT © [Travis Fischer](https://github.com/transitive-bullshit)