如何同时使用 commonjs rollup 和 babel

Question

I have found several question about this problem.我发现了几个关于这个问题的问题。
The best relate to my problem is this与我的问题最相关的是这个

I cannot understand how to right configure my app.我无法理解如何正确配置我的应用程序。

I must use commonjs and target to Node 10 syntax.我必须使用 commonjs 并以 Node 10 语法为目标。

I have an example file: example.js我有一个示例文件：example.js

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

Html.js 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>
        );
      }
    );
};

my .babelrc is:我的 .babelrc 是：

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

my rollup.config.js is:我的 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
  }
]

I have try all order combination for 2 week but allways I get this example.js in dist folder:我已经尝试了 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
});

What is wrong: in example.js no export have to do and var Html = /*#__PURE__*/Object.freeze({ ... haven't to exist, the first function Html is right.有什么问题：在 example.js 中无需导出并且var Html = /*#__PURE__*/Object.freeze({ ...不存在，第一个函数 Html 是正确的。

What is the right configuration to get plugin work well?使插件正常工作的正确配置是什么？

my package.json is:我的 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"
  }
}

help!帮助！

best regards,此致，
Leonardo莱昂纳多

Answer 1

The solution was avoid to use @rollup/plugin-commonjs :解决方案是避免使用@rollup/plugin-commonjs ：
I do not know if this plugin is buggy or if I am not be able to use it in the right manner.我不知道这个插件是否有问题，或者我是否无法以正确的方式使用它。

Not using the plugin bring me to move all import export in ES6 module syntax to be understend by rollup.不使用插件让我将 ES6 模块语法中的所有导入导出移动到汇总中。

by now using gulp , rollup , @rollup/plugin-babel only on jsx file, babel-plugin-inferno , @rollup/plugin-node-resolve I can compile an example using fastify , inferno , hyperscript or JSX syntax together.通过使用现在gulp ， rollup ， @rollup/plugin-babel仅在JSX文件， babel-plugin-inferno ， @rollup/plugin-node-resolve我可以使用编译一个例子fastify ， inferno ， hyperscript或JSX语法在一起。

this is my gulpfile.js (this have to be in commonjs):这是我的 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);

all work fine.一切正常。

best regards, Leonardo最好的问候，莱昂纳多

如何同时使用 commonjs rollup 和 babel

问题描述

1 个解决方案

解决方案1
0 2020-11-25 11:04:17

如何同时使用 commonjs rollup 和 babel

问题描述

1 个解决方案

解决方案1 0 2020-11-25 11:04:17

解决方案1
0 2020-11-25 11:04:17