ts重点学习140-rollup打包ts文件笔记

简介: ts重点学习140-rollup打包ts文件笔记
使用rollup打包TS文件
安装依赖:
全局安装rollup npm install rollup-g
安装TypeScript npm install typescript -D
安装TypeScript 转换器 npm install rollup-plugin-typescript2 -D
安装代码压缩插件 npm install rollup-plugin-terser -D
安装rollupweb服务 npm install rollup-plugin-serve -D
安装热更新 npm install rollup-plugin-livereload -D
安装配置环境变量用来区分本地和生产 npm install cross-env -D
步骤:
 1.安装依赖
 2.npm init -y 创建配置package.json文件
 3.创建 src public rollup.config.js文件
 4.配置 rollup.config.js
package.json文件:
{
  "name": "rollupTs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production rollup -c",
    "dev": "cross-env NODE_ENV=development rollup -c"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cross-env": "^7.0.3",
    "rollup-plugin-livereload": "^2.0.5",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-replace": "^2.2.0",
    "rollup-plugin-serve": "^1.1.0",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-typescript2": "^0.31.1",
    "typescript": "^4.5.5"
  }
}
rollup.config.js文件
import path from "path"
import livereload from "rollup-plugin-livereload"
import serve from "rollup-plugin-serve"
import { terser } from "rollup-plugin-terser"
import ts from "rollup-plugin-typescript2"
export default {
  input: "./src/index.ts", 
  output: {
    file: path.resolve(__dirname, "./dist/index.js"),
    sourcemap: true,
    format: "umd", 
  },
  plugins: [
    ts(),
    livereload(),
    terser(),
    serve({
      open: true,
      port: 8080,
      openPage: "/public/index.html"
    }),
  ]
}
console.log(process.env);
相关文章
|
3天前
|
JavaScript 前端开发 测试技术
[小笔记]TypeScript/JavaScript数组转置
[小笔记]TypeScript/JavaScript数组转置
38 0
|
3天前
|
JavaScript 前端开发 测试技术
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
31 0
|
3天前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
69 0
|
3天前
|
编解码 JavaScript 前端开发
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
75 0
|
3天前
|
JavaScript
TypeScript【类的继承、访问修饰符、readonly 修饰符、存取器、实例方法与静态方法、实例属性与静态属性、静态属性、抽象类】(三)-全面详解(学习总结---从入门到深化)
TypeScript【类的继承、访问修饰符、readonly 修饰符、存取器、实例方法与静态方法、实例属性与静态属性、静态属性、抽象类】(三)-全面详解(学习总结---从入门到深化)
22 0
|
3天前
|
JavaScript 前端开发
TypeScript极速入门笔记1
TypeScript极速入门笔记1
34 4
|
3天前
|
JavaScript 前端开发 Java
小笔记:如何使用代码注释:关于JavaScript与TypeScript 注释和文档的自动生成
小笔记:如何使用代码注释:关于JavaScript与TypeScript 注释和文档的自动生成
225 0
|
3天前
|
JavaScript 前端开发 测试技术
[小笔记]TypeScript/JavaScript模拟Python中的zip(不使用map)
[小笔记]TypeScript/JavaScript模拟Python中的zip(不使用map)
20 0
|
3天前
|
存储 JavaScript 前端开发
TypeScript笔记(15)—— 深入理解TypeScript中的装饰器
TypeScript笔记(15)—— 深入理解TypeScript中的装饰器
58 0
|
3天前
|
存储 JavaScript 前端开发
TypeScript笔记(5)—— 基本数据类型
TypeScript笔记(5)—— 基本数据类型
42 0