当前位置: 首页 > 工具软件 > rollup.js > 使用案例 >

rollup.js使用

汝彭薄
2023-12-01

1.新建文件夹,用来存放将要创建的项目
2.安装rollup  cnpm install rollup --save-dev
3.添加.gitignore文件
4.创建rollup.config.js

**node版本不能低于14.18
**当node版本设置成16.16.0,提示nvm版本从1.1.7要升到1.1.9,还有其他安装环境的bug
**后又把node版本设置到14.19.0

项目目录:
toolsfile={
    config:{
        index.ts 存放配置文件
    }
    libs:{
        hTools.ts  //把所有封装的jsdk导出的ts
        sdk1.ts
        sdk2.ts
    }
    index.js  //入口文件
    rollup.config.js
    package.json  //自动生成
    tsconfig.json
    README.md
    tsconfig.json
}

package.json  修改package.json部分参数 可用npm init
{
  "devDependencies": {
    "rollup": "^3.3.0" 
  },
  "type": "module",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c rollup.config.js"
  },
  "dependencies": {
    "@rollup/plugin-commonjs": "^23.0.2",
    "@rollup/plugin-terser": "^0.1.0",
    "qs": "^6.11.0",
    "rollup-plugin-typescript2": "^0.34.1",
    "typescript": "^4.9.3"
  },
  "name": "h-tools",
  "description": "# XX sdk 介绍",
  "version": "1.0.0",
  "main": "libs/hTools.ts",
  "repository": {
    "type": "git",
    "url": "http://git.xxxx.xxx" //存放项目的git地址
  },
  "author": "",
  "license": "ISC"
}

rollup.config.js
import typescript from "rollup-plugin-typescript2";
import commonjs from '@rollup/plugin-commonjs'
import terser from '@rollup/plugin-terser'
export default {
  input: "libs/hTools.ts",  
  external: ["qs"],
  output: {
    file: "./dist/hTools.js",
    format: "umd",
    name: "hTools",
    globals:{
      qs:"qs"
    }
  },
  plugins: [typescript(),commonjs(), terser()]
};

libs/hTools.ts
import browserType from "./browserType";
export default {
    browserType
}
export {
    browserType
}
//export default 和export同时使用,编译时会有警告,不影响封装代码使用
//编译成js文件,npm run build


index.js
import hTools from "./dist/hTools";
export default hTools;

config/index.ts
export default {
    urlSchema: {
        android: "2222/open",
        ios: "tinytiger1234567890:///open",
        appStore: "itms-apps://itunes.apple.com/app/id1234567890",
    }
}

README.md
## 安装

浏览器环境:

通过 npm 安装:

```
// npm安装
cnpm install git+http://git.xxx.cn/web/XXX.git --save  (用npm安装不成功)

// 在项目中使用
import { getToken } from 'h-tools';
const token = getToken();
或者
import hTools from 'h-tools';
hTools.getToken();

```
### getToken 获取app token

`getToken`

```
import { getToken } from 'h-tools'
const token:string|null = getToken();

```

<table> 
    <tr>
        <th>参数名称</th>
        <th>说明</th>
        <th>类型</th>
        <th>默认值</th>
    </tr>
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
</table>

---

//table 就是普通的表格
//  ---是分割线
//  > aaaa  下级标题行

更多插件使用可参考:https://blog.csdn.net/weixin_30372331/article/details/118987807,插件介绍会比较详细

 类似资料: