如何一起使用 commonjs rollup 和 babel答案

【问题标题】：how to use commonjs rollup and babel together如何一起使用 commonjs rollup 和 babel
【发布时间】：2021-02-27 21:51:54
【问题描述】：

我发现了几个关于这个问题的问题。
与我的问题最相关的是this

我不明白如何正确配置我的应用。

我必须使用 commonjs 并以 Node 10 语法为目标。

我有一个示例文件：例子.js

const Html = require('./Html');

HTML.js

/**
 * Modulo Html
 * @module Html
 */
// Routes will be rendered into children
/*
 * This module give an function with fixed title and id
 * for root element
 * 
 * @param {Object} param0 
 * @param {string} param0.title 
 * @param {string} [param0.idRoot='root'] 
 * @returns {function({childern: JSX.Element}):JSX.Element}
 */
module.exports = function Html({ title, idRoot='root' }) {
    return (
      /*
       * 
       * @param {Object} param0 
       * @param {JSX.Element} param0.children 
       * @returns {JSX.Element}
       */
      function ({children}) {
        return (
          <html>
            <head>
              <title>{title}</title>
            </head>
            <body>
              <div id="{idRoot}">{children}</div>
            </body>
          </html>
        );
      }
    );
};

我的 .babelrc 是：

{
    "plugins": [
        [
            "babel-plugin-inferno"
            , {
                "imports": true 
            }
        ]
    ]
}

我的 rollup.config.js 是：

import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';

let commonPlugins = [
      , babel({
        plugins: [
          '@babel/plugin-external-helpers'
        ]
        , extensions: [
          ".jsx"
          , ".js"
        ]
        , exclude: "node_module/**"
        , babelHelpers: "external"
        , presets: [
          [
            '@babel/preset-react'
          ]
          , [
            '@babel/preset-env'
            , {
                loose: true 
              , modules: false
              , targets: {
                browsers: '> 1%, IE 11, not op_mini all, not dead'
                , node: 10
              }
            }
          ]
        ]
      })
      , resolve({ 
        main: true
        , extensions: [
          '.jsx'
          , '.js'
          , '.mjs'
          , '.json'
          , '.node'
        ]
        , preferBuiltins: false
      })
      , commonjs({
        include: [
          'src/**/*.js'
          , 'src/**/*.jsx'
        ]
        , ignoreGlobal: true
        , transformMixedEsModules: true
      })
];
let commonExtenal = [
      'inferno'
      , 'inferno-server'
      , 'inferno-router'
      , 'fastify'
      , 'fastify-plugin'
      , 'assert'
]
export default [
  {
    input: 'src/index.jsx'
    , output: {
        file: 'dist/bundle.js',
        format: 'cjs'
      }
    , plugins: commonPlugins
    , external: commonExtenal
  }
  , {
      input: 'src/example.js'
      , output: {
          file: 'dist/example.js'
          , format: 'cjs'
          , exports: 'default'
        }
      , plugins: commonPlugins
      , external: commonExtenal
  }
]

我已经尝试了 2 周的所有订单组合，但我总是在 dist 文件夹中获得这个 example.js：

'use strict';

var require$$0 = ...
var inferno = require('inferno');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);

/**
 * Modulo Html
 * @module Html
 */
// Routes will be rendered into children

/*
 * This module give an function with fixed title and id
 * for root element
 * 
 * @param {Object} param0 
 * @param {string} param0.title 
 * @param {string} [param0.idRoot='root'] 
 * @returns {function({childern: JSX.Element}):JSX.Element}
 */
module.exports = function Html(_ref) {
  var title = _ref.title,
      _ref$idRoot = _ref.idRoot;
  return (
    /*
     * 
     * @param {Object} param0 
     * @param {JSX.Element} param0.children 
     * @returns {JSX.Element}
     */
    function (_ref2) {
      var children = _ref2.children;
      return inferno.createVNode(1, "html", null, [inferno.createVNode(1, "head", null, inferno.createVNode(1, "title", null, title, 0), 2), inferno.createVNode(1, "body", null, inferno.createVNode(1, "div", null, children, 0, {
        "id": "{idRoot}"
      }), 2)], 4);
    }
  );
};

var Html = /*#__PURE__*/Object.freeze({
    __proto__: null
});

错在哪里：在 example.js 中没有 export 必须做，var Html = /*#__PURE__*/Object.freeze({ ... 不存在，第一个函数 Html 是对的。

让插件正常工作的正确配置是什么？

我的 package.json 是：

{
  "name": "...",
  "version": "1.0.0",
  "main": "index.js",
  "engines": {
    "node": ">=10"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "prebublish": "npm run build",
    "build": "rollup --config",
    "start": "node ./dist/example.js"
  },
  "standard": {
    "ignore": [
      "*.jsx"
    ]
  },
  "targets": {
    "node": "current"
  },
  "peerDependencies": {
    "inferno": "^7.4.6",
    "inferno-server": "^7.4.6",
    "inferno-router": "^7.4.6"
  },
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/plugin-external-helpers": "^7.12.1",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.5",
    "@rollup/plugin-babel": "^5.2.1",
    "@rollup/plugin-buble": "^0.21.3",
    "@rollup/plugin-commonjs": "^16.0.0",
    "@rollup/plugin-node-resolve": "^10.0.0",
    "babel-plugin-inferno": "^6.1.1",
    "cross-env": "^7.0.2",
    "inferno": "^7.4.6",
    "inferno-router": "^7.4.6",
    "inferno-server": "^7.4.6",
    "jsdoc": "^3.6.6",
    "rollup": "^2.33.1",
    "rollup-plugin-terser": "^7.0.2",
    "standard": "^16.0.0",
    "tap": "^14.10.8"
  }
}

帮助！

最好的问候，
莱昂纳多

【问题讨论】：

标签： babeljs commonjs rollup

【解决方案1】：

解决方案是避免使用@rollup/plugin-commonjs:
我不知道这个插件是否有问题，或者我无法以正确的方式使用它。

不使用插件让我将 ES6 模块语法中的所有导入导出移动到汇总。

现在只在 jsx 文件上使用 gulp、rollup、@rollup/plugin-babel、babel-plugin-inferno、@rollup/plugin-node-resolve 我可以使用 fastify、inferno、hyperscript 或 JSX 编译示例语法在一起。

这是我的 gulpfile.js（这必须在 commonjs 中）：

const { series } = require('gulp');
const del = require('del');
const rollup = require('rollup');
const fs = require('fs')
const { nodeResolve } = require('@rollup/plugin-node-resolve');
const { babel } = require('@rollup/plugin-babel');

let commonPlugins = [
      , nodeResolve({ 
        main: true
        , extensions: [
          '.jsx'
          , '.js'
          , '.mjs'
          , '.json'
          , '.node'
        ]
        , preferBuiltins: false
      })
      , babel({
          babelrc: true
        , plugins: [
          '@babel/plugin-external-helpers'
        ]
        , extensions: [
          ".jsx"
        ]
        , exclude: "node_module/**"
        , babelHelpers: "external"
        , presets: [
          [
            '@babel/preset-react'
          ]
          , [
            '@babel/preset-env'
            , {
                loose: true 
              , modules: 'auto'
              , debug: false
              , targets: {
                browsers: '> 1%, IE 11, not op_mini all, not dead'
                , node: 10
              }
            }
          ]
        ]
      })
];
let commonExtenal = [
      'inferno'
      , 'inferno-server'
      , 'inferno-router'
      , 'fastify'
      , 'fastify-plugin'
      , 'assert'
      , 'hyperscript'
      , 'inferno-hyperscript'
      , 'hyperscript-helpers'
]
const clean = function(cb) {
    const deleted = del.sync(['dist/**', '!dist'], {force: true});
    console.log('Deleted paths:\n', deleted.join('\n'));
    cb();
}
async function buildPlugin() {
    const bundle = await rollup.rollup({
        input: 'src/index.js'
        , plugins: commonPlugins
        , external: commonExtenal
    });
    return bundle.write({
        output: {
            file: 'dist/bundle.js'
            , format: 'cjs'
            , exports: 'default'
        }
    });
}
async function buildExample() {
    const bundle = await rollup.rollup({
          input: 'src/example.js'
        , plugins: commonPlugins
        , external: commonExtenal
    });
    return bundle.write({
        output: {
            file: 'dist/example.js'
            , format: 'cjs'
           // , exports: 'default'
        }
    });
}
exports.build = series(clean, buildPlugin, buildExample);

一切正常。

最好的问候，莱昂纳多

【讨论】：