一.环境配置
1.全局配置编译TS文件
npm install typescript -g
tsc --init # 生成tsconfig.json
tsc # 可以将ts文件编译成js文件
tsc --watch # 监控ts文件变化生成js文件
2.配置rollup环境
- 安装依赖
cnpm install rollup typescript rollup-plugin-typescript2 @rollup/plugin-node-resolve rollup-plugin-serve -D
- 初始化 ts 文件
npx ts --init - rollup配置文件
import serve from "rollup-plugin-serve"; //rollup插件 开发环境中提供静态文件服务器和自动刷新功能。
import ts from "rollup-plugin-typescript2"; //rollup 插件，用于将 TypeScript 代码编译为 JavaScript.
import { nodeResolve } from "@rollup/plugin-node-resolve"; // rollup 插件，用于解析模块依赖关系中的 Node.js 模块。
import path from 'path' //node 模块
// import { dirname } from 'path'
import { fileURLToPath } from 'url'
const __dirname = path.dirname(fileURLToPath(import.meta.url)) //import.meta.url 当前文件路径
export default {
input: './src/index.ts', //打包入口
output: {
format: 'iife',// 打包的js 输出的格式
file: path.resolve('dist/bunlde.js'),//文件输出地址
sourcemap: true,//是否开启源文件映射
},
plugins: [
nodeResolve({
extensions: ['.js', '.ts'] // // 指定扩展名
}),
ts({
tsconfig: path.resolve(__dirname, 'tsconfig.json') //指定ts校验文件
}),
serve({
open: true, //是否打开默认浏览器
openPage: '/public/index.html', // 打开文件
port: 3000, // 端口
contentBase: '' // 根路径
})
]
}
3.tsconfig文件配置项详解
{
"compilerOptions": {
// 编译配置项
/* Visit https://aka.ms/tsconfig to read more about this file */
/* Projects */
/* 保存是否开启增量编译 提高编译速度和效率 */
// "incremental": true,
/*
是否启用组合项目 组合项目 将多个子项目组合在一起进行编译 通过启用这个组合式项目可以 实现夸项目的引用和管理 以及更高效的增量编译
跨项目引用：在一个子项目中可以引用另一个子项目中的代码。
增量编译：当一个子项目发生变化时，只会重新编译该子项目及其依赖的项目，而不需要重新编译整个项目。
构建顺序优化：编译器可以根据项目间的依赖关系，确定最优的编译顺序，从而提高编译速度。
*/
// "composite": true,
/*
通过这个选项来输出增量输出的文件路径
*/
// "tsBuildInfoFile": "./.tsbuildinfo",
/*
禁用项目引用的源文件重定向
禁用源文件重定向后，项目引用将直接引用源文件而不是输出文件。
这可能会导致重复编译某些源文件，从而增加编译时间。
个人 建议仅在特殊情况下需要直接引用源文件时才使用该选项
*/
// "disableSourceOfProjectReferenceRedirect": true,
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
/*
是否禁止加载引用的项目
禁用引用项目的加载后，编译器将不再加载和解析项目引用，并且仅考虑当前项目的源文件。
这可能会导致缺少类型信息或构建依赖关系图的问题。
因此，在使用该选项时，请确保不依赖于其他项目的类型定义和依赖关系。
*/
// "disableReferencedProjectLoad": true,
/* Language and Environment */
/* 指定编译的目标es 版本*/
"target": "es2016",
/* 指定编译时用到的JavaScript库
"lib": [
"es2016",
"dom"
]
*/
// "lib": [],
/* jsx 处理方式.
"preserve": 将 JSX 保持不变，不进行转换。
"react-native": 将使用 React Native 运行的应
*/
// "jsx": "preserve",
/* 开启装饰器 */
// "experimentalDecorators": true,
/* 控制是否在编译结果中包含装饰器的元数据 */
// "emitDecoratorMetadata": true,
/* 指定用于创建 JSX 元素的工厂函数 react jsx 经常用*/
// "jsxFactory": "",
/* 指定用于创建 JSX 片段（JSX Fragments）的工厂函数 */
// "jsxFragmentFactory": "",
/* 导入 JSX 相关的辅助代码的模块路径 */
// "jsxImportSource": "",
/* 生成 JSX 元素和组件的命名空间。
"reactNamespace": "MyReact"
*/
// "reactNamespace": "",
/* 禁用默认的内置库声明。 */
// "noLib": true,
/* 类属性的定义是否应该使用 ECMAScript 中新引入的类字段语法。
constructor(x: number) {
this.x = x;
}
foo = 'bar';
#z = 42;
*/
// "useDefineForClassFields": true,
/* 指定模块的检测方式 */
// "moduleDetection": "auto",
/* Modules */
/* 模块的输出方式。 */
"module": "commonjs",
// TypeScript 源代码的根目录
// "rootDir": "./",
// 指定模块解析策略
// "moduleResolution": "node10",
// 指定相对路径的基准目录。当使用相对路径引用模块时
// "baseUrl": "./",
// 配置模块名的映射路径。可以使用 "paths" 选项来定义模块名到具体文件路径的映射关系。
// 这可以方便地解决模块引用时的路径问题。
// 例如，
// "@app/*": ["src/app/*"],
// "@utils/*": ["src/utils/*"]
// "paths": {},
// 用于指定多个根目录
// "rootDirs": [
// "path/to/dir1",
// "path/to/dir2",
// "path/to/dir3"
// ]
// "rootDirs": [],
// 指定类型声明文件的根目录
// "typeRoots": [
// "path/to/dir1",
// "path/to/dir2"
// ]
// "typeRoots": [],
// 指定要包含的类型声明文件（Type Declaration Files）的列表。 外部的比如知道loadlish jquery
// 如果是空数组 ts会去node_modules/@types 查找相关的ts 声明文件
// "types": [],
// 允许访问全局的 UMD 库
// "allowUmdGlobalAccess": true,
// 指定模块文件的后缀名列表。
// "moduleSuffixes": [
// ".mjs",
// ".vue"
// ]
// "moduleSuffixes": [],
// 允许在导入模块时使用 TypeScript 文件的扩展名（.ts 或 .tsx）
// "allowImportingTsExtensions": true,
// 解析 package.json 文件中的 "exports" 字段
// "resolvePackageJsonExports": true 表示启用了解析 package.json 文件中的 "exports" 字段。
// 这意味着 TypeScript 编译器将会按照 "exports" 字段的配置来解析和导入模块
// "resolvePackageJsonExports": true,
// 启用解析 package.json 文件中的 "imports" 字段。ts4.8版本以上
// "resolvePackageJsonImports": true,
// 自定义条件的数组选项。
/*
"customConditions": [
{
"match": "\\.spec\\.ts$",
"action": "exclude"
},
{
"match": "\\.mock\\.ts$",
"action": "exclude"
}
]
第一个条件会排除所有以 ".spec.ts" 结尾的文件，第二个条件会排除所有以 ".mock.ts" 结尾的文件。这样，在编译过程中，这些文件将不会被包含在编译结果中。
*/
// "customConditions": [],
// 启用 JSON 模块解析的选项
// "resolveJsonModule": true,
// 允许导入任意扩展名的选项。
// "allowArbitraryExtensions": true,
// 用于禁用模块解析的选项。启用 "noResolve" 后，将无法使用 import 语句导入其他模块
// "noResolve": true,
/* JavaScript Support */
// 允许导入 JavaScript 文件的选项。
// "allowJs": true,
// 用于检查 JavaScript 文件的选项
// "checkJs": true,
// 配置模块解析的层数
// "maxNodeModuleJsDepth": 1,
/* Emit */
// 配置是否生成声明文件（.d.ts）
// "declaration": true,
// 生成声明文件映射（.d.ts.map）
// "declarationMap": true,
// 控制只生成声明文件而不生成编译后的 JavaScript 文件的选项
// "emitDeclarationOnly": true,
// 是否生成源映射文件（.js.map）
// "sourceMap": true,
// 是否将源映射文件（.js.map）内联到编译后的 JavaScript 代码中
// "inlineSourceMap": true,
// 指定编译后的 JavaScript 文件的输出位置。
// "outFile": "./",
// 指定编译后的 JavaScript 文件的输出目录。
// "outDir": "./",
// 编译过程中是否删除注释。
// "removeComments": true,
// 控制是否在编译过程中生成输出文件。
// "noEmit": true,
// 编译过程中引入辅助函数。
// "importHelpers": true,
// 控制在编译过程中如何处理没有被使用作为值的导入语句。
// "importsNotUsedAsValues": "remove",
// 控制编译过程中对迭代器和生成器的转译方式。
// "downlevelIteration": true,
// 设置生成的 JavaScript 代码中源文件（原始 TypeScript 文件）的根目录。
// "sourceRoot": "",
// 设置生成的 JavaScript 代码中源映射文件的根目录。
// "mapRoot": "",
// 生成的 JavaScript 代码中内联源代码的位置信息
// "inlineSources": true,
// 生成的文本文件开头会插入一个字节顺序标记 (BOM)。BOM 是一个特殊的 Unicode 字符（\uFEFF），用于指示文本文件的字符编码。它主要用于处理不同编码的文本文件之间的兼容性问题。
// "emitBOM": true,
// 当将 "newLine" 设置为 "crlf" 时，TypeScript 编译器会使用回车换行符 (\r\n) 作为生成的文件的换行符。这是一种常见的换行符格式，在许多操作系统和文本编辑器中被广泛使用。
// "newLine": "crlf",
// "stripInternal": true,
// "noEmitHelpers": true,
// "noEmitOnError": true,
// "preserveConstEnums": true,
// 该配置选项用于指定生成声明文件（.d.ts）的输出目录
// "declarationDir": "./",
// "preserveValueImports": true,
/* Interop Constraints */
// "isolatedModules": true,
// "verbatimModuleSyntax": true,
// "allowSyntheticDefaultImports": true,
// 更兼容的方式处理使用 ES 模块导入和导出的代码
"esModuleInterop": true,
// "preserveSymlinks": true,
// 检查文件名的大小写是否与导入语句中使用的一致。如果不一致，则会发出编译警告或错误。
"forceConsistentCasingInFileNames": true,
// 代码校验
/* Type Checking */
// 使用严格模式
"strict": true,
// 防止变量或函数的类型被隐式推断为 any 类型
// "noImplicitAny": true,
// 编译器会对 null 和 undefined 值进行严格检查，并在代码中强制使用非空值
// "strictNullChecks": true,
// 对函数类型的兼容性进行更严格的检查
// "strictFunctionTypes": true,
// "strictBindCallApply": true,
// 会对类成员属性的初始化进行严格检查。具体而言，它要求在声明类成员属性时，要么立即对其进行初始化，要么在构造函数中对其进行初始化，以确保所有的类成员属性都被正确初始化。
// "strictPropertyInitialization": true,
// 对函数中的 this 指向进行检查。如果函数中使用了 this，但其类型没有明确声明，或者不能确定其类型，则编译器会报错。
// "noImplicitThis": true,
// "useUnknownInCatchVariables": true,
// 会在生成的 JavaScript 代码中始终包含 "use strict" 指令。这意味着生成的 JavaScript 代码将采用严格模式，强制执行更严格的语法和行为规则
// "alwaysStrict": true,
// 检查是否存在未使用的局部变量，并给出相应的警告或错误。
// "noUnusedLocals": true,
// 检查是否存在未使用的函数参数，并给出相应的警告或错误。
// "noUnusedParameters": true,
// "exactOptionalPropertyTypes": true,
// 检查是否所有的代码路径都有返回值。如果存在某些代码路径没有明确的返回语句，编译器就会发出警告或错误。
// "noImplicitReturns": true,
// 检查 switch 语句中是否存在没有明确的 break 或 return 语句的情况。如果存在这样的情况，编译器就会发出警告或错误。
// "noFallthroughCasesInSwitch": true,
// 对数组和元组进行索引访问时，要求开发者显式地处理可能导致空值（undefined）或无效值的情况，以避免潜在的空指针异常。
// "noUncheckedIndexedAccess": true,
// "noImplicitOverride": true,
// 禁止在具有索引签名的类型中使用属性访问操作符（.）来访问属性，以防止出现潜在的类型不匹配或运行时错误
// "noPropertyAccessFromIndexSignature": true,
// "allowUnusedLabels": true,
// "allowUnreachableCode": true,
/* Completeness */
// 是否跳过对默认库文件（如 lib.d.ts）的类型检查，默认库文件包含 TypeScript 标准库的声明和类型定义。
// "skipDefaultLibCheck": true,
// 是否跳过对所有声明文件（.d.ts）的类型检查，包括默认库文件和自定义的外部类型声明文件。
"skipLibCheck": true
}
}
