Rollup + Typescript 项目创建

307 阅读1分钟

1. npm 初始化

## 创建项目文件夹
mkdir rollup-ts-sample

## 初始化 npm 工程结构
npm init

2. ts 初始化

## 安装 typescript
npm i typescript --save-dev

## 初始化 ts 工程结构
npx tsc --init

3. babel

## 安装 @babel 相关的开发依赖;核心,提供 transform 的框架
npm i @babel/core --save-dev

## 预设(插件的集合),指导并影响 transform 的结果
npm i @babel/preset-env --save-dev

## 预设(插件的集合),指导并影响 transform 的结果
npm i @babel/preset-typescript --save-dev

## 插件,复用 babel 植入的 helper 代码,和 @babel/runtime 配合使用
npm i @babel/plugin-transform-runtime --save-dev


## 安装 @babel 相关的运行时依赖;被植入的 helper 代码
npm i @babel/runtime --save

## 运行时的 polyfill ,不会污染全局
npm i @babel/runtime-corejs3 --save

## 安装 @rollup 集成 @babel 所需的插件
npm i @rollup/plugin-babel --save-dev

4. rollup 和 rollup plugin

## 安装 rollup
npm i rollup --save-dev

## 安装 rollup 插件;转换 commonjs 模块到 ES6,方便输出到 bundle
npm i @rollup/plugin-commonjs --save-dev

## 引入 json 文件为 json object
npm i @rollup/plugin-json --save-dev

## A Rollup plugin which locates modules using the Node resolution algorithm, 
for using third party modules in node_modulesnpm i @rollup/plugin-node-resolve --save-dev

## 输出额外注释到 bundle 的插件
npm i rollup-plugin-banner --save-dev

## 清理文件夹的插件
npm i rollup-plugin-cleanner --save-dev

## 设置环境变量的插件
npm i rollup-plugin-dotenv --save-dev

## 帮助生成 dts 文件
npm i rollup-plugin-dts --save-dev

## 设置环境变量的插件
npm i rollup-plugin-inject-env --save-dev

## ugly bundle
npm i rollup-plugin-terser --save-dev

5. eslint 和 eslint 插件和配置

## 安装 eslint,初始化 eslint
npm i eslint --save-dev
npx eslint --init

6. prettier 和 prettier 插件和配置

7. git hook

8. 测试配置9. 参考

www.typescriptlang.org/download

stackoverflow.com/questions/5…