הצלחתי בסוף להגדיר את rollup, והתוצאה נראית הרבה יותר טוב.
זה דוגמא לקובץ סופי (שמורכב משני קבצי ts) עם- rollup:
function showMessage(message) {
alert(message);
}
showMessage("hello");
וככה הוא נראה עם - webpack:
/******/ (function() { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ 420:
/***/ (function(__unused_webpack_module, exports) {
exports.__esModule = true;
exports.showMessage = showMessage;
function showMessage(message) {
alert(message);
}
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
var __webpack_exports__ = {};
var _dialogs = __webpack_require__(420);
(0, _dialogs.showMessage)("hello");
/******/ })()
;
זה הקונפיגורציה המינימאלית של rollup:
import typescript from '@rollup/plugin-typescript';
import babel from '@rollup/plugin-babel';
export default {
input: 'src/index.ts',
output: {
file: 'dist/drop-word-script.js'
},
plugins: [
typescript(),
babel({
babelHelpers: 'bundled',
presets: [
['@babel/preset-env']
],
extensions: ['.js', '.ts']
})
],
};