使用汇总生成打字稿定义文件 [英] Generate typescript definition files using rollup
问题描述
我正在尝试使用 rollup js 来构建我的打字稿项目,但我不知道如何生成定义文件以及如何将它们自动包含在 dist 文件中.
I am trying rollup js to build my typescript project but I don't know how to generate the definition files and how to include them automatically in the dist files.
有人知道怎么做吗?
这是我的 rollup.config.js
Here is my rollup.config.js
import typescript from "rollup-plugin-typescript";
import handlebars from "rollup-plugin-handlebars";
import babel from 'rollup-plugin-babel';
export default {
entry: 'src/generator.ts',
format: 'cjs',
plugins: [
typescript(),
handlebars(),
babel()
],
dest: 'dist/bundle.js'
};
我使用的是默认的 ts 配置,但声明=true 也是如此.
I'm using the default ts config but that's the same with declaration=true.
也尝试使用 Webpack :
Also trying using Webpack :
module.exports = {
context: __dirname + '/src',
entry: {
index: './generator'
},
output: {
path: __dirname + '/build',
publicPath: '/',
filename: 'generator.js'
},
resolve: {
root: __dirname,
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
{ test: /\.ts$/, loaders: ['ts-loader'], exclude: /node_modules/ },
{ test: /\.hbs/, loaders: ['handlebars-loader'], exclude: /node_modules/ }
]
}
}
Tsconfig:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"declaration": true,
"outDir": "build"
},
"exclude": [
"node_modules",
"dist",
"build"
]
}
生成的 d.ts 看起来像这样:
The generate d.ts looks like this :
import { ExportPageModel } from './models/page-model';
export declare type ExportType = 'text' | 'html';
export * from './models/page-model';
export declare namespace Generator {
function generateHtml(page: ExportPageModel): string;
function generateText(page: ExportPageModel): string;
}
但是在我使用该包的应用程序中,它找不到生成器...
But in my app using that package, it can't find the Generator...
import { ExportPageModel, Generator } from 'emlb-generator';
生成器未定义,但自动完成工作正常,所以我找不到问题出在哪里:(
Generator is undefined but the auto completion works fine so I can't find where is the problem :(
Generator.generateHtml({
...
});
推荐答案
要完成此任务,您需要将指令添加到 rollup.config.js
、tsconfig.json
和 package.json
To do this task you are going to add instructions into rollup.config.js
, tsconfig.json
and package.json
考虑汇总版本^0.62.0"
:
1 - 添加 rollup-plugin-typescript2
库:
1 - Add library of rollup-plugin-typescript2
:
npm i rollup-plugin-typescript2
npm i rollup-plugin-typescript2
2 - 在 rollup.config.js
从'rollup-plugin-typescript2'导入打字稿
import typescript from 'rollup-plugin-typescript2'
3 - 在插件块中包含打字稿插件
注意:下面的 js 只是一个例子,所以我删除了其他说明只是为了让例子更干净......
Notes: the js bellow is just an example, so I removed other instructions only to keep the example cleaner...
import typescript from 'rollup-plugin-typescript2'
export default {
input: 'src/index.tsx',
output: [
{
file: pkg.main,
format: 'cjs',
exports: 'named',
sourcemap: true
},
{
file: pkg.module,
format: 'es',
exports: 'named',
sourcemap: true
}
],
plugins: [
typescript({
rollupCommonJSResolveHack: false,
clean: true,
})
]
}
4 - 在 tsconfig.json
注意:我删除了其他说明只是为了让示例更清晰...
Notes: I removed other instruction only to keep the example cleaner...
示例:
{
"compilerOptions": {
"declaration": true,
},
"include": ["src"],
"exclude": ["node_modules", "build", "dist", "example", "rollup.config.js"]
}
5 - 在 package.json
中包含 main
和 module
指令,以告知输出的位置.强>
5 - include the main
and module
instruction inside the package.json
to inform where will be the output.
最后,在 package.json
的 script
中包含 rollup -c
指令,例如:
And finnaly, include the rollup -c
instruction inside the script
of the package.json
, example:
{
"name": "example",
"version": "0.1.6",
"description": "Testing",
"author": "Example",
"license": "AGPL-3.0-or-later",
"main": "dist/index.js",
"module": "dist/index.es.js",
"jsnext:main": "dist/index.es.js",
"scripts": {
"build": "rollup -c",
"start": "rollup -c -w"
},
"files": [
"dist"
]
}
这篇关于使用汇总生成打字稿定义文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!