Простой экспорт / импорт в React, возвращающий undefined
У меня есть локальный пакет, который я устанавливаю в своем приложении React через:
"my-library": "file:~/Desktop/my-library"
Его файл main выглядит просто так:
export class MyClass {
}
который при переносе с помощью babel выглядит так:
(function e(t,n,r){function s(o,u){if (!n[o]){if (!t[o]){var a=typeof require= = "function"&&require;if (!u&&a)return a(o,!0);if (i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code = "MODULE_NOT_FOUND",f}var l=n[o] = {exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require= = "function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var MyClass = exports.MyClass = function MyClass() {
_classCallCheck(this, MyClass);
};
},{}]},{},[1]);
Теперь я могу импортировать это в свое приложение только с этим правом?
import {MyClass} from "my-library";
Однако после импорта MyClass становится undefined.
Я знаю, что моя библиотека загружена правильно, поскольку пакет загружен правильно, потому что, если я вызову исключение в основном файле, мое приложение React подберет его, и импорт не удастся.
Что мне не хватает?
Ответы 3
Я думаю, что на самом деле это ничего не экспортирует, потому что существует только имя определенного класса, но не название экспорта.
export class MyClass {
вот оно что-то вроде этого:
var MyClass = exports.MyClass = function MyClass() {
вместо:
var MyClass = function MyClass() {
Итак, я думаю, вам нужно назвать свой именованный экспорт:
export const MyClass = class MyClass {}
@Snowman он должен работать. См. Пример на codeanbox codeandbox.io/s/yjoqovz4jz
export class MyClass и export const MyClass = class MyClass дают такую же точную транспиляцию с babel. Так что никакой разницы нет. Проблема должна быть в другом.
попробуйте что-нибудь вроде этого
let units = {var1:var_,var2:var2}
units.MyClass =MyClass ;
module.exports = units;
или этот
class MyClass {
.
.
.
}
export default MyClass
units - это массив (назовите его как хотите), если вы хотите экспортировать более одного элемента, вы можете указать
Оказывается, проблема заключалась в том, что я был browserify в своей грубой задаче (поскольку эта библиотека также предназначена для работы в сети). Это изменило мой файл таким образом, что нарушил импорт для родного. Отключение browserify устранило проблему. Теперь мне нужно найти реальное решение, чтобы заставить его работать на обоих.
Обновление: решение, позволяющее заставить браузер работать как в Интернете, так и в нативном, заключается в использовании режима standalone.
browserifyOptions: {
standalone: 'MyModule'
}
Я не думаю, что это сработало. Или он вообще не изменил скомпилированный файл. В скомпилированном файле уже есть это:
var MyClass = exports.MyClass = function MyClass(), что означает, что он называет экспорт, не так ли?