javascript - How to include both import and require statements in the bundle using rollup - Stack Overflow

admin管理员组

文章数量:1387455

When I use only const Example1 = require('./example1.js) statement then code inside example1.js file is getting included in the bundle. And if I use only import Example2 from './example2.js' then also code inside example2.js is getting included in the bundle. But if I use both the statements only import is working and require is not working.

I am using rollup for bundling.

My rollup configuration looks like this

import babel from 'rollup-plugin-babel'
import monjs from 'rollup-plugin-monjs'
import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import resolve from 'rollup-plugin-node-resolve'
import url from 'rollup-plugin-url'
import svg from 'rollup-plugin-svg'
import json from 'rollup-plugin-json';
import { terser } from 'rollup-plugin-terser'

export default {
  input: 'src/sdk/test.js',
  output: [
    {
      file: "src/sdk/sdk.js",
      format: 'cjs'
    },
    {
      file: "src/sdk/sdk.es.js",
      format: 'es'
    },
    {
      file: "src/sdk/sdk.iife.js",
      format: 'iife'
    }
  ],
  plugins: [
    resolve({
      browser: true,
    }),
    monjs(),
    external(),
    postcss({
      modules: true
    }),
    url({
      limit: 100 * 1024,
      emitFiles: false
    }),
    svg(),
    babel({
      exclude: 'node_modules/**',
      "plugins": ["@babel/plugin-proposal-class-properties"]
    }),
    terser(),
    json()
  ]
}

When I use only const Example1 = require('./example1.js) statement then code inside example1.js file is getting included in the bundle. And if I use only import Example2 from './example2.js' then also code inside example2.js is getting included in the bundle. But if I use both the statements only import is working and require is not working.

I am using rollup for bundling.

My rollup configuration looks like this

import babel from 'rollup-plugin-babel'
import monjs from 'rollup-plugin-monjs'
import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import resolve from 'rollup-plugin-node-resolve'
import url from 'rollup-plugin-url'
import svg from 'rollup-plugin-svg'
import json from 'rollup-plugin-json';
import { terser } from 'rollup-plugin-terser'

export default {
  input: 'src/sdk/test.js',
  output: [
    {
      file: "src/sdk/sdk.js",
      format: 'cjs'
    },
    {
      file: "src/sdk/sdk.es.js",
      format: 'es'
    },
    {
      file: "src/sdk/sdk.iife.js",
      format: 'iife'
    }
  ],
  plugins: [
    resolve({
      browser: true,
    }),
    monjs(),
    external(),
    postcss({
      modules: true
    }),
    url({
      limit: 100 * 1024,
      emitFiles: false
    }),
    svg(),
    babel({
      exclude: 'node_modules/**',
      "plugins": ["@babel/plugin-proposal-class-properties"]
    }),
    terser(),
    json()
  ]
}

• javascript
• bundle
• es6-modules
• monjs
• rollup

Share Improve this question Follow asked Jul 7, 2020 at 8:15 Vikram HegdeVikram Hegde 65022 gold badges77 silver badges1414 bronze badges 2

• Well, no, just don't mix the two module syntaxes. – Bergi Commented Jul 26, 2020 at 15:33
• I wish I could @Bergi – Vikram Hegde Commented Jul 27, 2020 at 12:52

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

By default, rollup supports 'esm' modules as entry. If you like to include monjs files in the project, you can include '@rollup/plugin-monjs' into plugins field, it usually works.

Maybe the following config will help, I tried with very simple example:

monjs({transformMixedEsModules:true})

transformMixedEsModules Instructs the plugin whether or not to enable mixed module transformations. This is useful in scenarios with mixed ES and CommonJS modules. Set to true if it's known that require calls should be transformed, or false if the code contains env detection and the require should survive a transformation.

https://github./rollup/plugins/tree/master/packages/monjs

本文标签： javascriptHow to include both import and require statements in the bundle using rollupStack Overflow