Блог

Я разрабатываю свою собственную систему сборки с использованием AMD модуля Webpack.

Я бы хотел, чтобы результат был похож на следующий блок, указанный в кавычках https://webpack.js.org/configuration/output/#module-definition-systems .

 define('MyLibrary', [], function() {
  return _entry_return_;
});
 

Итак, я скомпилировал следующий код.

 import React from "react";

export const Nav = () => {
  return <div>nav</div>;
};

 

И тогда мой ожидаемый код находится в следующем блоке.

 define('Nav', ['react'], function(a) {

  return a.createElement('div',null,'nav');
});
 

Но записи вывода результата — это нечто другое.

Во-первых, результат ввода Webpack содержит слишком много кодов webpackBootstrap, кодов кэша модуля и т.д…

Во-вторых, выходные модули ссылаются на зависимости по идентификатору номера.

 /******/ (() => { // webpackBootstrap
/******/    "use strict";
/******/    var __webpack_modules__ = ({

/***/ 869:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);

// EXPORTS
__webpack_require__.d(__webpack_exports__, {
  "Nav": () => /* binding */ Nav
});

;// CONCATENATED MODULE: external "react"
const external_react_namespaceObject = react;
var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_namespaceObject);
;// CONCATENATED MODULE: ./modules/nav/src/frNav.tsx

var Nav = function Nav() {
  return /*#__PURE__*/external_react_default().createElement("div", null, "nav");
};

/***/ })

/******/    });
/************************************************************************/
/******/    // The module cache
/******/    var __webpack_module_cache__ = {};
/******/    
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/        // Check if module is in cache
/******/        if(__webpack_module_cache__[moduleId]) {
/******/            return __webpack_module_cache__[moduleId].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;
/******/    }
/******/    
/************************************************************************/
/******/    /* webpack/runtime/compat get default export */
/******/    (() => {
/******/        // getDefaultExport function for compatibility with non-harmony modules
/******/        __webpack_require__.n = (module) => {
/******/            var getter = module amp;amp; module.__esModule ?
/******/                () => module['default'] :
/******/                () => module;
/******/            __webpack_require__.d(getter, { a: getter });
/******/            return getter;
/******/        };
/******/    })();
/******/    
/******/    /* webpack/runtime/define property getters */
/******/    (() => {
/******/        // define getter functions for harmony exports
/******/        __webpack_require__.d = (exports, definition) => {
/******/            for(var key in definition) {
/******/                if(__webpack_require__.o(definition, key) amp;amp; !__webpack_require__.o(exports, key)) {
/******/                    Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/                }
/******/            }
/******/        };
/******/    })();
/******/    
/******/    /* webpack/runtime/hasOwnProperty shorthand */
/******/    (() => {
/******/        __webpack_require__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)
/******/    })();
/******/    
/******/    /* webpack/runtime/make namespace object */
/******/    (() => {
/******/        // define __esModule on exports
/******/        __webpack_require__.r = (exports) => {
/******/            if(typeof Symbol !== 'undefined' amp;amp; Symbol.toStringTag) {
/******/                Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/            }
/******/            Object.defineProperty(exports, '__esModule', { value: true });
/******/        };
/******/    })();
/******/    
/************************************************************************/
/******/    // startup
/******/    // Load entry module
/******/    __webpack_require__(869);
/******/    // This entry module used 'exports' so it can't be inlined
/******/ })()
;
//# sourceMappingURL=frNav.tsx.js.map
 

Мне не нужно много кодов, подобных приведенному выше блоку.
Потому что я собираюсь использовать requirejs или systemjs загружать свои модули и создавать свой собственный инструмент объединения, называемый загрузчиком модулей, для выполнения.

Могу ли я уменьшить AMD результат вывода модуля webpack?

Это моя конфигурация веб-пакета.

 {
      entry: { [this.entryName]: this.absoluteFilePath },
      devtool: "source-map",
      module: {
        rules: [
          {
            test: /.(ts|js)x?$/,
            exclude: /node_modules/,

            use: {
              loader: "babel-loader",
              options: {
                presets: [
                  "@babel/preset-env",
                  "@babel/preset-react",
                  "@babel/preset-typescript",
                ],
              },
            },
          },
        ],
      },
      output: {
         
        filename: "[name].js",
        library: "@"   this.parentModule.moduleName   "/@[name]",
        sourceMapFilename: "[name].js.map",
        path: path.resolve(this.parentModule.absoluteModulePath, "built"),
      },
      externals: ["react"],
      resolve: {
        extensions: [".tsx", ".ts", ".js"],
        alias: {
          react: "react",
        },
      },

      optimization: {
        minimize: false,
        usedExports: false,
      },
       
    }
 

Спасибо, что прочитали и помогли мне.

Для этого вам не нужен Webpack, Babel может сделать это сам, вам просто нужен плагин AMD для этого:

https://www.npmjs.com/package/babel-plugin-transform-modules-simple-amd

Насколько я помню, я использовал этот.