Почему я получаю "Uncaught ReferenceError: экспорт не определен" при попытке использовать Rollup с commonjs?

#javascript #rollup #rollupjs

Вопрос:

У меня есть проект, над которым я работаю для развлечения, чтобы получить примеры UMD, ESM и CommonJS, работающие с rollup. UMD и ESM отлично работают, но для CommonJS я получаю…

Неперехваченная ошибка ссылки: экспорт не определен

Вывод CommonJS таков…

 'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

class SimpleTest{
    constructor(message){
        console.log(`Your message is ${message}`);
    }
}

exports.SimpleTest = SimpleTest;

HTML есть…

 <html>
<body>
<script src="https://requirejs.org/docs/release/2.3.6/comments/require.js"></script>
<script>
    require(["./target/ng-demo.js"], (dep)=>{
        new dep.SimpleTest("ESM");
    });
</script>
</body>
</html>

Разве экспорт не будет поступать из RequireJS?

Ответ №1:

Похоже, вы пытаетесь продемонстрировать amd вместо cjs . Не имеет смысла запускать cjs в браузере, поскольку он работает только на node env.

Вы пытаетесь включить, require.js который поддерживает amd браузер, поэтому вы просто переключаете свой cjs на amd , тогда это сработает:

 {
  file: "./target/ng-demo.js",
  format: "amd" // instead of `cjs`
}

Ответ №2:

Это исправлено, установив для module параметра компилятора значение es6 :

   {
  "compilerOptions": {     
    "module": "es6",
    "target": "es5",    
  }
}

Дайте мне знать, если это работает для вас!

Ответ №3:

На случай, если кому-то интересно, вот что я сделал, чтобы заставить CJS работать…

 <html>
<body>
<script src="https://cdn.jsdelivr.net/npm/require1k@2.0.0/require1k.min.js"></script>
<script>

    R(function (require, module, exports) {
        const {SimpleTest} = require("./target/ng-demo.cjs");
        new SimpleTest("commonjs");
    });
</script>
</body>
</html>