From bfbd1be5e1166a8ffb79c23c72639085914b8c03 Mon Sep 17 00:00:00 2001 From: Travis Fischer Date: Mon, 9 Jul 2018 07:52:45 -0400 Subject: [PATCH] Merge pull request #36 from monsterooo/feat-readme add readme file --- .../create-freesewing-pattern/readme.zh-CN.md | 139 ++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 packages/create-freesewing-pattern/readme.zh-CN.md diff --git a/packages/create-freesewing-pattern/readme.zh-CN.md b/packages/create-freesewing-pattern/readme.zh-CN.md new file mode 100644 index 00000000000..c5cbcf7774d --- /dev/null +++ b/packages/create-freesewing-pattern/readme.zh-CN.md @@ -0,0 +1,139 @@ +# create-react-library + +> 一个命令行(CLI)工具, 使用一个命令就可以为你创建一个基于Rollup的React库作为你开源项目的基础. + +[![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库或组件** + +

+ +

+ +这个命令行工具(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: + + +## 安装 + +这个包必须依赖 `node >= 4`, 但是我们推荐 `node >= 8`. + +```bash +npm install -g create-react-library +``` + + +## 创建一个新的模块 + +```bash +create-react-library +``` + +根据提示输入你模块的基本信息，然后CLI将会执行以下步骤 + +- 将模板复制到新创建的文件夹中 +- 通过yarn或npm安装依赖 +- 通过npm的link链接包到本地, 方便开发调用 +- 初始化本地git仓库 + +这个时候，你的新模块目录应该和下面的截图差不多。这些所有的设置都是为了更友好的进行本地开发 + +

+ +

+ + +## 开发 + +本地开发分为两个部分. + +首先, 你可以运行rollup去监听你的`src/`模块, 当你有任何更改会自动编译到`dist/` + +```bash +npm start # 运行rollup和监听更改 +``` + +然后, 在本地开发中需要在`example/`目录中链接你的模块 + +```bash +# (打开新的终端窗口中) +cd example +npm link # 如果使用yarn可以跳过这步 +npm start # 运行 create-react-app dev server 可以开你的示例程序 +``` + +现在, 当你对库的`src/`目录或演示程序的`example/src`目录有任何更改, `create-react-app`会重新加载本地开发服务, 这样就能很愉快的对你的组件进行快速开发迭代. + +![](https://media.giphy.com/media/12NUbkX6p4xOO4/giphy.gif) + + +#### 发布到NPM + +将库发布到 **npm** 时请务必要确保所有的依赖模块已经正确添加在了`peerDependencies`中, rollup会自动识别`peerDependencies`配置选项, 而不会将它捆绑在你的模块中(或者可以叫他外部依赖). + +然后就可以愉快的发布拉 + +```bash +# 注意下面的命令会编译`commonjs`和`es`的版本到你模块的dist/目录中 +npm publish +``` + + +#### Github Pages + +将示例部署到github pages相当简单, 我们需要先给example编译一个生产版本, 这个example用于演示你的库. 然后运行gh-pages来部署生成的bundle文件到github. + +```bash +npm run deploy +``` + + +## 使用例子 + +### 导出多个命名 + +这个[分支](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但又无需将它绑定到当前模块中. + +### 开源库 + +下面是一些使用`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创建背景性感的瓦片幻灯片效果 🔥 +- [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 +- [react-shimmer](https://github.com/gokcan/react-shimmer) - 加载图片时使用一个闪光的效果. + +如果你想添加你的库到列表中, 欢迎提交 [issue](https://github.com/transitive-bullshit/create-react-library/issues/new)! + + +## License + +MIT © [Travis Fischer](https://github.com/transitive-bullshit)