rollup + typescript 搭建项目-Toy模板网

这篇具有很好参考价值的文章主要介绍了rollup + typescript 搭建项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、创建项目

1、初始化项目

1、创建一个项目目录，进入该目录
2、执行 npm init -y 生成 package.json
3、执行 tsc --init 生成 tsconfig.json

2、安装依赖

（1）安装 typescript 和 rollup-plugin-typescript

 npm install -D typescript rollup-plugin-typescript

（2）安装 rollup，我这里是全局安装

npm install rollup --global

可以用 rollup -v 查看安装版本
中文文档：文档链接

二、编译配置

（1）修改 tsconfig.json

{
  "compilerOptions": {
    "target": "esnext", // 设置目标编译版本，这里是 esnext，表示支持 ES6 特性
    "module": "ESNext", // 设置模块类型，这里是 ESNext，表示使用 ES6 模块。
    "moduleResolution": "node", // 设置模块解析方式，这里是 node，表示使用 Node.js 的模块解析方式
    "strict": true, // 开启严格类型检查，防止类型不匹配的问题。

    "allowJs": true, // 允许编译 JavaScript 文件，而不是只编译 TypeScript 文件
    "noImplicitAny": false, // 关闭自动推断 any 类型的功能，确保类型注释不会被忽略
    "noImplicitThis": false, // 关闭自动推断 this 类型的功能，确保类型注释不会被忽略

    "esModuleInterop": true, // 允许 ES6 模块与其他模块之间的交互。
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".", // 设置项目的根目录，这样 TypeScript 就可以从项目的根目录开始查找模块。
    "types": ["node"], // 设置支持的类型定义，这里是 node，表示支持 Node.js 的类型定义。
    "paths": { //设置路径别名，这样在导入模块时可以更简洁
		"core/*": ["src/core/*"],
	}, 
    "lib": ["dom", "esnext"] // 设置支持的库，这里是 esnext 和 dom，表示支持 ES6 特性以及 DOM 相关 API
  },
  "include": ["src"] // 设置需要编译的文件，这里是 src
}

（2）根目录新建 rollup.config.js

import typescript from 'rollup-plugin-typescript';

export default {
	input: './src/web/entry-runtime-with-compiler.ts',
	output: {
		file: 'dist/vue.js',
		format: 'umd',
		name: 'Vue',
		sourcemap: true,
	},
	plugins: [
		typescript(),
	]
};

（3）package.json 增加 script
注：-w 会监测文件修改重新打包

{
	"scripts": {
  		"dev": "rollup -c -w --environment INCLUDE_DEPS,BUILD:development"
	},
}

（4）测试
新建 src/main.ts

const sname: string = "rollop";

console.log(sname);

执行如下脚本：

npm run dev

如果生成 dist/bundle.js 则代表成功

若报错：

RollupError: Node tried to load your configuration file as CommonJS even though it is likely an ES module. To resolve this, change the extension of your configuration to ".mjs", set "type": "module" in your package.json file or pass the "--bundleConfigAsCjs" flag

则在 package.json 中添加文章来源地址https://www.toymoban.com/news/detail-792876.html