javascript - How to bundle local typescript files into main bundle using Rollup - Stack Overflow

admin管理员组

文章数量:1356258

I am trying to create an npm module that can be used in the browser.

I'm using typescript and rollup.

My tsconfig.json is:

{
  "pilerOptions": {
    "module": "CommonJS",
    "outDir": "lib",
    "strict": true,
    "rootDir": "src"
  }
}

and my rollup.config.js is:

import typescript from "@rollup/plugin-typescript";

export default {
  input: "src/index.ts",
  output: {
    dir: "lib",
    format: "iife",
  },
  plugins: [typescript()],
};

Inside src/index.ts I have the following:

// src/index.ts
import log from './log'

const myFn = () => {
 ...myFn code
}

My issue is that in the bundle, I get the following:

// lib/index.js bundle
var log_1 = require("./log");

When I actually want to bundle the log file inside the main lib/index.js.

How can I do this with Typescript and rollup?

Note: I have tried to add outFile (ts docs) but that is not supported by "@rollup/plugin-typescript".

Do I have to do the tsc pile myself and then the rollup bundle?

I am trying to create an npm module that can be used in the browser.

I'm using typescript and rollup.

My tsconfig.json is:

{
  "pilerOptions": {
    "module": "CommonJS",
    "outDir": "lib",
    "strict": true,
    "rootDir": "src"
  }
}

and my rollup.config.js is:

import typescript from "@rollup/plugin-typescript";

export default {
  input: "src/index.ts",
  output: {
    dir: "lib",
    format: "iife",
  },
  plugins: [typescript()],
};

Inside src/index.ts I have the following:

// src/index.ts
import log from './log'

const myFn = () => {
 ...myFn code
}

My issue is that in the bundle, I get the following:

// lib/index.js bundle
var log_1 = require("./log");

When I actually want to bundle the log file inside the main lib/index.js.

How can I do this with Typescript and rollup?

Note: I have tried to add outFile (ts docs) but that is not supported by "@rollup/plugin-typescript".

Do I have to do the tsc pile myself and then the rollup bundle?

• javascript
• typescript
• npm
• rollup

Share Improve this question Follow asked Jan 6, 2021 at 10:36 Karl TaylorKarl Taylor 5,28944 gold badges3939 silver badges6565 bronze badges 2

• 1 I'm still looking for an answer to this but if anyone es across this question, I actually moved to Webpack, and it was much simpler. – Karl Taylor Commented Jan 7, 2021 at 12:53
• having a similar issue here it seems :/ stackoverflow./questions/71796571/… No option for webpack unfortunately – eternalStudent Commented Apr 12, 2022 at 10:38

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Rollup requires the TypeScript piler to generate ES Modules in order to properly bundle your code. You'll need to change the module format to "ESNext" instead of "CommonJS" in your tsconfig.json or change the @rollup/plugin-typescript configuration in your Rollup config:

typescript({ module: "ESNext" })

As of rollup/plugins#788, you will get a warning if this is not configured correctly.

@rollup/plugin-typescript: Rollup requires that TypeScript produces ES Modules. Unfortunately your configuration specifies a "module" other than "esnext". Unless you know what you're doing, please change "module" to "esnext" in the target tsconfig.json file or plugin options.

本文标签： javascriptHow to bundle local typescript files into main bundle using RollupStack Overflow