vlambda博客
学习文章列表

// 切换到工作空间，创建文件夹 rollup-ts-templatemkdir rollup-ts-template// 温馨提示：右键-新建文件夹更方便....

// 跳转到工程文件夹 rollup-ts-templatecd rollup-ts-template// 执行 npm init 会自动生成 package.json 文件，一路回车即可npm init

npm i --save-dev @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup rollup-plugin-terser

npm i --save-dev typescript rollup-plugin-typescript

npm i --save-dev @rollup/plugin-babel @babel/preset-env @babel/plugin-transform-runtime

import path from 'path'import resolve from '@rollup/plugin-node-resolve'import commonjs from '@rollup/plugin-commonjs'import rollupTypescript from 'rollup-plugin-typescript2'import babel from '@rollup/plugin-babel'import { DEFAULT_EXTENSIONS } from '@babel/core'import { terser } from 'rollup-plugin-terser'
// 读取 package.json 配置import pkg from './package.json'// 当前运行环境，可通过 cross-env 命令行设置const env = process.env.NODE_ENV// umd 模式的编译结果文件输出的全局变量名称const name = 'RollupTsTemplate'const config = {  // 入口文件，src/index.ts input: path.resolve(__dirname, 'src/index.ts'), // 输出文件 output: [ // commonjs { // package.json 配置的 main 属性 file: pkg.main, format: 'cjs', }, // es module { // package.json 配置的 module 属性 file: pkg.module, format: 'es', }, // umd { // umd 导出文件的全局变量 name, // package.json 配置的 umd 属性 file: pkg.umd, format: 'umd' } ], plugins: [ // 解析第三方依赖 resolve(), // 识别 commonjs 模式第三方依赖 commonjs(), // rollup 编译 typescript rollupTypescript(), // babel 配置 babel({ // 编译库使用 runtime babelHelpers: 'runtime', // 只转换源代码，不转换外部依赖 exclude: 'node_modules/**', // babel 默认不支持 ts 需要手动添加 extensions: [ ...DEFAULT_EXTENSIONS, '.ts', ], }), ]}
// 若打包正式环境，压缩代码if (env === 'production') { config.plugins.push(terser({ compress: { pure_getters: true, unsafe: true, unsafe_comps: true, warnings: false } }))}export default config

// tsconfig.json{ "compilerOptions": { /* 基础选项 */ "target": "esnext", /* 指定 ECMAScript 目标版本：'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ "module": "esnext", /* 输出的代码使用什么方式进行模块化：'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ "lib": [ /* 指定引用的标准库 */ "esnext", "dom", "dom.iterable", ],  "allowJs": true, /* 允许编译 js 文件 */ "removeComments": true, /* 输出不包含注释 */ /* 严格类型检查选项 */ "strict": true, /* 启用所有严格类型检查选项 */ "noImplicitAny": true, /* 检查隐含 any 类型的表达式和声明 */ "strictNullChecks": false, /* 严格空检查. */ /* 额外检查 */ "noUnusedLocals": true, /* 检查无用的变量. */ /* Module Resolution Options */ "moduleResolution": "node", /* 指定模块查找策略：'node' (Node.js) or 'classic' (TypeScript pre-1.6) */ "baseUrl": "./", /* 查找模块的基础目录 */ "paths": { "@/*": [ "src/*" ] }, /* 记录 baseUrl 的模块路径查找别名 */ "types": [], /* 类型声明文件 */ }, "include": [ /* 指定编译处理的文件列表 */ "src/*.ts", "src/types.ts" ],}// tsconfig.types.json{ // 继承 tsconfig.json 中的通用配置 "extends": "./tsconfig.json", "compilerOptions": { "declaration": true, /* 生成相应的 '.d.ts' file. */ "declarationDir": "./dist/types", /* 类型声明文件输出目录 */ "emitDeclarationOnly": true, /* 只生成声明文件，不生成 js 文件*/ "rootDir": "./src", /* 指定输出文件目录（用于输出），用于控制输出目录结构 */ }}

module.exports = { "presets": [ [ "@babel/preset-env", { /* Babel 会在 Rollup 有机会做处理之前，将我们的模块转成 CommonJS，导致 Rollup 的一些处理失败 */ "modules": false } ] ], "plugins": [ [ // 与 babelHelpers: 'runtime' 配合使用 "@babel/plugin-transform-runtime" ] ]}

{ "name": "rollup-ts-template", "version": "1.0.0", "description": "", "main": "./dist/index.js", "module": "./dist/index.esm.js", "umd": "./dist/index.umd.js", "types": "./dist/types/index.d.ts", "scripts": { "clean:dist": "rimraf dist", "build:types": "npm run clean:dist && tsc -b ./tsconfig.types.json", "build": "npm run build:types && rollup -c", "test": "node test/test.js", "pretest": "npm run build" }, "author": "", "license": "ISC", "devDependencies": { "@babel/plugin-transform-runtime": "^7.17.0", "@babel/preset-env": "^7.16.11", "@rollup/plugin-babel": "^5.3.1", "@rollup/plugin-commonjs": "^21.0.3", "@rollup/plugin-node-resolve": "^13.1.3", "rimraf": "^3.0.2", "rollup": "^2.70.1", "rollup-plugin-terser": "^7.0.2", "rollup-plugin-typescript2": "^0.31.2", "typescript": "^4.6.3" }, "files": [ "dist" ]}

export function sayHelloWorld () { console.log('hello world')}

onst { sayHelloWorld } = require('../dist/index.js')
sayHelloWorld()