javascript - 如何使用 rollup 在 bundle 中包含 import 和 require 语句

Question

当我仅使用 const Example1 = require('./example1.js) 语句时，example1.js 文件中的代码将包含在包中。如果我只使用 import Example2 from './example2.js' 那么 example2.js 中的代码也会包含在包中。但是，如果我同时使用这两个语句，则只有 import 有效，而 require 无效。

我正在使用 rollup 进行 bundle 。

我的汇总配置如下所示

import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
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,
    }),
    commonjs(),
    external(),
    postcss({
      modules: true
    }),
    url({
      limit: 100 * 1024,
      emitFiles: false
    }),
    svg(),
    babel({
      exclude: 'node_modules/**',
      "plugins": ["@babel/plugin-proposal-class-properties"]
    }),
    terser(),
    json()
  ]
}

Answer 1

默认情况下，rollup 支持 'esm' 模块作为入口。如果你想在项目中包含 commonjs 文件，你可以在插件字段中包含 '@rollup/plugin-commonjs'，它通常有效。

也许下面的配置会有帮助，我尝试了一个非常简单的例子:

commonjs({transformMixedEsModules:true})

transformMixedEsModules指示插件是否启用混合模块转换。这在混合 ES 和 CommonJS 模块的场景中很有用。如果已知 require 调用应该被转换，则设置为 true，如果代码包含环境检测并且 require 应该在转换后仍然存在，则设置为 false。

https://github.com/rollup/plugins/tree/master/packages/commonjs