https://github.com/zhaotoday/my-libraries
我的工具库
https://github.com/zhaotoday/my-libraries
Last synced: 6 months ago
JSON representation
我的工具库
- Host: GitHub
- URL: https://github.com/zhaotoday/my-libraries
- Owner: zhaotoday
- Created: 2018-01-06T11:45:15.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-06-09T13:37:05.000Z (over 1 year ago)
- Last Synced: 2025-02-11T23:41:14.071Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 2.05 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Rollup 介绍
Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
## 链接
- [Rollup.js 官网](http://rollup.org/)
- [Rollup.js 中文官网](https://rollupjs.org/zh)
- [Rollup.js 中文文档](https://rollup.bootcss.com/)
- [Rollup 插件列表](https://github.com/rollup/rollup/wiki/Plugins)
- [如何使用Rollup打包样式文件并添加LiveReload](http://www.w3cplus.com/javascript/learn-rollup-css.html)
## 使用
```bash
# JS 校验，在根目录下执行
$ node_modules/.bin/eslint {some-module}/src/**/*.js
# CSS 校验，在根目录下执行
$ node_modules/.bin/stylelint {some-module}/src/**/*.css
# 开发、调试，在 {some-module} 目录下执行
$ cd {some-module}
$ npm run dev
# 构建代码，在 {some-module} 目录下执行
$ cd {some-module}
$ npm run build
# 登录 npm
$ npm login
# 发布 {some-module}，请注意，如果非首次发布，需要修改 package.json 的版本字段 version
$ npm publish
# 安装 {some-module}
$ npm install --save some-module
```
```js
// 引用 {some-module}
// 类或构造函数
import SomeModule from 'some-module'
// or
// 其他
import someModule from 'some-module'
```
## 相关包
#### 1. rollup-watch
用于源文件改变时，自动重新构建。
#### 2. rollup-plugin-node-resolve
指导 Rollup 如何去寻找外部的模块。
#### 3. rollup-plugin-commonjs
大部份 npm 包都被输出为 CommonJS 模块，在 Rollup 处理它们之前，需要将 CommonJS 转成 ES2015。
> 注意 rollup-plugin-commonjs 应该在其它插件变换你的模块之前使用 - 这是为了避免其它插件做了一些改变，而这改变会破坏了 CommonJS 的检测。
#### 4. rollup-plugin-babel
在项目中使用 Babel，可以用上那些未被浏览器和 Node.js 支持的未来的 JavaScript 特性。
```bash
npm install --save-dev rollup-plugin-babel babel-preset-latest babel-plugin-external-helpers
```
#### 5. rollup-plugin-postcss
添加 PostCSS 支持。
```bash
npm install --save-dev rollup-plugin-postcss postcss-simple-vars postcss-nested postcss-cssnext cssnano
```
## 一些建议
- 建议本地安装 Rollup，这样任何人克隆你的项目和运行 npm install 将会得到一个兼容的版本；
- 建议构建同时支持 UMD 和 CommonJS 格式，以满足所有调用场景：
1. UMD 格式需要把依赖包打进目标文件；
2. CommonJS 格式需要将依赖包申明为外部依赖。
- 如果开发的是纯 JS 的 npm 包，请将 PostCSS 的相关插件去除（当然，保留着也无妨）。
- 用 package.json 的 moduleName 字段定义你要暴露的类、构造函数或对象，如：MyClass、MyConstructor、myObject，未定义则默认取 package.json 的 name 字段的值。