# @handday/ui

> Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验
> rollup 的特点：

1. Tree Shaking: 自动移除未使用的代码, 输出更小的文件
2. Scope Hoisting: 所有模块构建在一个函数内, 执行效率更高
3. Config 文件支持通过 ESM 模块格式书写
4. 可以一次输出多种格式:
   模块规范: IIFE, AMD, CJS, UMD, ESM
   Development 与 production 版本: .js, .min.js

```
项目根目录：npm install
```

### 2.安装包文件

```
root/packages/theme-chalk: npm install
```

### 3.开发模式

```
1. 在项目根目录执行：npm run lib:dev
2. 样式开发进入=>root/packages/theme-chalk : gulp watch
注：第二项根据实际需求使用
```

### 4.组件开发

## 组件开发统一在 packages 中开发

```

├── packages
├── button
│ ├── src
│ │ ├── main.vue
├── theme-chalk(固定目录)
│ ├── button.scss(示例button组件)
│ ├── index.scss (主文件 所有的组件必须导入到该文件下)
└──── index.js
```

> 注: 组件的样式和.vue 文件分开写 建议一个组件一个样式文件

![图片](./asset/img/1.png)

### 基础组件库和业务项目之间的关联

创建链接
假如有两个项目，一个是 zztx_web_component（实际在开发的组件库仓库名称），是我们要开发的 npm 组件,另一个是 project（实际在开发写项目，名称不一定叫 project）,是我们要运行项目

首先，进入我们的 zztx_web_component 项目下，执行 npm link

```javascript
cd zztx_web_component
npm link
```

执行命令后，npm-module 会根据 package.json 中的配置，把 zztx_web_component 链接到全局(快捷键的方式)
window 系统下一般在 `C:\Program Files\nodejs\node_modules\@handday`
然后，进入 zztx_web_component 项目，执行

```javascript
project=>mian.js 导入组件
import handdayUi from '@handday/components'(一次性全部引用)
import {button} from '@handday/components' (按需引用)
import '@handday/ui/lib/theme-chalk.css'
Vue.use(handdayUi)

cd project（进入需要链接到 zztx_web_component 的项目）
npm link @handday/components
```

最后 npm-module 的修改会被直接映射到 npm-example/node_modules/npm-module 下面

### 组件库上传私服

> 此环节由飞哥（舒飞）操作

在项目根目录执行

```javascript
npm run build
```

> `上传私服时将package.json中的dependencies和devDependencies改为空对象，避免安装组件时时间过长`

```javscript
{
    "name": "@handday/ui",
    "version": "1.0.3",
    "main": "lib/index.js",
    "private": false,
    "description": "",
    "author": {
        "name": "willes"
    },
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "npm run lib:build && npm run theme:build",
        "lib:dev": "rollup --config build/rollup.config.umd.js --watch",
        "theme:build": "gulp --gulpfile packages/theme-chalk/gulpfile.js",
        "lib:build": "cross-env NODE_ENV=production rollup --config build/rollup.config.umd.js"
    },
    "dependencies": {
    },
    "devDependencies": {
    },
    "_id": "@handday/ui@1.0.0",
    "license": "ISC",
    "readme": "ERROR: No README data found!"
}

```

上传私服步骤（前提当前镜像指向私服地址使用命名 nrm current 查看）

```javascript
npm login
输入用户名、密码、邮箱
npm publish
```
### 5.额外的说明
此处由 邱伟 提供的待论证的尝试版组件库说明文档方案，如遇无法访问，请联系 邱伟。
> 首先修改 host  
> windows：C:\Windows\System32\drivers\etc\host  
> mac： /etc/hosts  
> 增加以下内容  
> 192.168.10.37 demo.myweb.com  

查看示例访问 [这里](http://demo.myweb.com)
