[英]TSC/Rollup: how to pipe TSC output into Rollup without TSC emitting files?
I'm using rollup with TSC to generate es modules based bundle.我正在使用带有 TSC 的汇总来生成基于 es 模块的包。 When I run
npm run build
tsc transpiles .ts
to .js
files inside src
.当我运行
npm run build
tsc 将.ts
转换为src
中的.js
文件。 After that, Rollup takes the .js
files and does some magic like turning bare module imports
into relative imports
to make it browser compatible and outputs it into dist
folder.之后,Rollup 获取
.js
文件并执行一些魔术,例如将bare module imports
转换为relative imports
以使其与浏览器兼容并将其输出到dist
文件夹。
Now the question is: How can you "give" the output of TSC's js
files to Rollup without emitting them to the src folder?现在的问题是:如何将 TSC 的
js
文件的 output “给”到 Rollup 而不将它们发送到 src 文件夹?
I know about the noEmit
tsconfig option but then I have no js
files to give to Rollup.我知道
noEmit
tsconfig 选项,但是我没有js
文件可以提供给 Rollup。
I'm using TSC because Babel gave me problems with decorators.我使用 TSC 是因为 Babel 给了我装饰器的问题。
This is the command:这是命令:
This is the folder structure.这是文件夹结构。 As you can see inside
src
folder every .ts
file has it .js
file which is redundant and is clutter in the src
folder.正如您在
src
文件夹中看到的那样,每个.ts
文件都有.js
文件,这是多余的,并且在src
文件夹中很混乱。 Would be nice to have them not saved there and just used as input for rollup.最好不要将它们保存在那里并仅用作汇总的输入。
Rollup config汇总配置
import html from "@web/rollup-plugin-html";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import copy from "rollup-plugin-copy";
export default {
input: "src/index.html",
output: { dir: "dist", format: "es", preserveModules: true },
plugins: [
html(),
nodeResolve(),
copy({
targets: [{ src: "src/manifest.json", dest: "dist" }],
}),
],
};
tsconfig.json tsconfig.json
{
"compilerOptions": {
"incremental": true /* Enable incremental compilation */,
"target": "es2019" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
"lib": [
"ES2019",
"DOM"
] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
"experimentalDecorators": true /* Enable experimental support for TC39 stage 2 draft decorators. */,
"module": "ESNEXT" /* Specify what module code is generated. */,
"moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
"rootDirs": [
"src"
] /* Allow multiple folders to be treated as one when resolving modules. */,
"importHelpers": true /* Allow importing helper functions from tslib once per project, instead of including them per-file. */,
"noEmitOnError": true /* Disable emitting files if any type checking errors are reported. */,
"isolatedModules": true /* Ensure that each file can be safely transpiled without relying on other imports. */,
"allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
"esModuleInterop": false /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
"strict": true ,
"skipLibCheck": true ,
"pretty": true
},
"include": ["src"],
"exclude": ["node_modules"]
}
my solution was to output tsc emitted files into tsc-out
folder inside the src folder and delete it after with pre- and post- npm scripts.我的解决方案是 output tsc 将文件发送到 src 文件夹内的
tsc-out
文件夹中,并在使用 npm 脚本之前和之后将其删除。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.