javascript - 如何像使用普通 ES6 文件一样从使用 babel 和 webpack 生成的文件中导入类？

问题描述

事实是我一直在努力理解，为什么我不能从以前用babel和webpack生成的文件中导入一个类，我想向你展示我的结论以及我的困惑。

这是我的结构文件夹

test
-dist
 -test.js
-public
 -index.html
 -main.js
-src
 -test.js
-package.json
-webpack

所以，如果我这样做

索引.html

<!DOCTYPE html>
<html>
<body>
   <script src="./main.js" type="module"></script>
</body>
</html>

测试.js

export default class Person {
    constructor() {
        this.name = "Jon Doe";
    }
    getName() {
        return this.name;
    }
}

main.js

import getName from "../src/test.js";

let person = new Person();
console.log(person.getName());

输出：

乔恩·多伊

到目前为止，使用 ES6 类导入和导出一切都按预期工作

然后我使用babel和webpack并像这样执行以下操作。

包.json

{
  "name": "test",
  "scripts": {
    "build": "webpack"
  },
  "author": "shimozurdo",
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",      
    "babel-loader": "^8.1.0"
  }
}

webpack.config

const path = require('path');

module.exports = {
    mode: 'development',

    entry: {
        "test": './src/test.js',
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        library: 'testObj',
        libraryTarget: 'umd',
        umdNamedDefine: true
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    "presets": ["@babel/preset-env"]
                }
            }
        ]
    }
};

然后我用npm run build

索引.html

<!DOCTYPE html>
<html>
<body>
    <script src="../dist/test.js"></script>
    <script src="./main.js"></script>
</body>
</html>

测试.js

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if(typeof define === 'function' && define.amd)
        define("testObj", [], factory);
    else if(typeof exports === 'object')
        exports["testObj"] = factory();
    else
        root["testObj"] = factory();
})(window, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/
/******/
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter) {
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/        }
/******/    };
/******/
/******/    // define __esModule on exports
/******/    __webpack_require__.r = function(exports) {
/******/        if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/            Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/        }
/******/        Object.defineProperty(exports, '__esModule', { value: true });
/******/    };
/******/
/******/    // create a fake namespace object
/******/    // mode & 1: value is a module id, require it
/******/    // mode & 2: merge all properties of value into the ns
/******/    // mode & 4: return value when already ns object
/******/    // mode & 8|1: behave like require
/******/    __webpack_require__.t = function(value, mode) {
/******/        if(mode & 1) value = __webpack_require__(value);
/******/        if(mode & 8) return value;
/******/        if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/        var ns = Object.create(null);
/******/        __webpack_require__.r(ns);
/******/        Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/        if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/        return ns;
/******/    };
/******/
/******/    // getDefaultExport function for compatibility with non-harmony modules
/******/    __webpack_require__.n = function(module) {
/******/        var getter = module && module.__esModule ?
/******/            function getDefault() { return module['default']; } :
/******/            function getModuleExports() { return module; };
/******/        __webpack_require__.d(getter, 'a', getter);
/******/        return getter;
/******/    };
/******/
/******/    // Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/
/******/    // Load entry module and return exports
/******/    return __webpack_require__(__webpack_require__.s = "./src/test.js");
/******/ })
/************************************************************************/
/******/ ({

/***/ "./src/test.js":
/*!*********************!*\
  !*** ./src/test.js ***!
  \*********************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return Person; });\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nvar Person = /*#__PURE__*/function () {\n  function Person() {\n    _classCallCheck(this, Person);\n\n    this.name = \"Jon Doe\";\n  }\n\n  _createClass(Person, [{\n    key: \"getName\",\n    value: function getName() {\n      return this.name;\n    }\n  }]);\n\n  return Person;\n}();\n\n\n\n//# sourceURL=webpack://testObj/./src/test.js?");

/***/ })

/******/ });
});

main.js

let person = new testObj.default;
console.log(person.getName());

输出：

乔恩·多伊

现在，您可以看到我得到了相同的结果，但是这样做

let person = new testObj.default;

这是我的第一个问题，我的 babel/webpack 配置有问题吗？

在控制台中看起来像这样

我很困惑，如果我尝试使用导入来执行此操作，我也会收到错误消息

索引.html

<body>       
    <script src="./main.js" type="module"></script>
</body>

main.js

import Person from "../dist/test.js";

console.log(Person);

我还没有完全理解这些概念，但更让我困惑的是，例如在Phaser 3中，我可以像这样轻松地从dist文件夹（通过 npm 安装）导入一个类import phaser from 'phaser'，它也是用 webpack 生成的，它完美运行。我的配置中缺少什么才能使用 ES6 的导入？

我做了这个结论和混淆的最基本的例子。有人可以帮助我吗？

提前致谢。

标签： javascriptwebpackconfigbabeljses6-modules

javascript - 如何像使用普通 ES6 文件一样从使用 babel 和 webpack 生成的文件中导入类？

问题描述

解决方案

推荐阅读