如何从具有多个导出的MJS文件中导入？

Question

在没有Webpack的情况下，我使用带有刺激的Rails，并试图从具有以下结构的"@uppy/core“中导入uppy中的Controller：

'use strict';

const Uppy = require('./Uppy');

const UIPlugin = require('./UIPlugin');

const BasePlugin = require('./BasePlugin');

const {
  debugLogger
} = require('./loggers');

module.exports = Uppy;
module.exports.Uppy = Uppy;
module.exports.UIPlugin = UIPlugin;
module.exports.BasePlugin = BasePlugin;
module.exports.debugLogger = debugLogger;

我试过：

import { Uppy } from "@uppy/core";
import Uppy from "@uppy/core";
import * as Uppy from "@uppy/core";

但什么都不管用。还有一个具有此结构的mjs文件：

// Core
export { default as Core } from '@uppy/core'

// Utilities
export { default as server } from '@uppy/companion-client'
/* eslint-disable */
import ProviderView from '@uppy/provider-views'
export var views = { ProviderView }
/* eslint-enable */

// Stores
export { default as DefaultStore } from '@uppy/store-default'
export { default as ReduxStore } from '@uppy/store-redux'

// UI plugins
export { default as Dashboard } from '@uppy/dashboard'
export { default as DragDrop } from '@uppy/drag-drop'
export { default as DropTarget } from '@uppy/drop-target'
export { default as FileInput } from '@uppy/file-input'
export { default as Informer } from '@uppy/informer'
export { default as ProgressBar } from '@uppy/progress-bar'
export { default as StatusBar } from '@uppy/status-bar'
export { default as ImageEditor } from '@uppy/image-editor'

// Acquirers
export { default as Dropbox } from '@uppy/dropbox'
export { default as GoogleDrive } from '@uppy/google-drive'
export { default as Instagram } from '@uppy/instagram'
export { default as OneDrive } from '@uppy/onedrive'
export { default as Box } from '@uppy/box'
export { default as Facebook } from '@uppy/facebook'
export { default as Unsplash } from '@uppy/unsplash'
export { default as Url } from '@uppy/url'
export { default as Webcam } from '@uppy/webcam'
export { default as ScreenCapture } from '@uppy/screen-capture'
export { default as Audio } from '@uppy/audio'

// Uploaders
export { default as AwsS3 } from '@uppy/aws-s3'
export { default as AwsS3Multipart } from '@uppy/aws-s3-multipart'
export { default as Transloadit } from '@uppy/transloadit'
export { default as Tus } from '@uppy/tus'
export { default as XHRUpload } from '@uppy/xhr-upload'

// Miscellaneous
export { default as Form } from '@uppy/form'
export { default as GoldenRetriever } from '@uppy/golden-retriever'
export { default as ReduxDevTools } from '@uppy/redux-dev-tools'
export { default as ThumbnailGenerator } from '@uppy/thumbnail-generator'

为了实现同样的目标，我还尝试从这里导入核心。但我不能让进口品起作用。有什么想法吗？

Answer 1

你能运行./bin/importmap json吗？

如果Uppy不在那里，就意味着它没有安装。

跑

./bin/importmap pin uppy --from jsdelivr

Pinning "@uppy/core" to https://cdn.jsdelivr.net/npm/@uppy/core@2.1.8/lib/index.js
Pinning "@uppy/dashboard" to https://cdn.jsdelivr.net/npm/@uppy/dashboard@2.1.4/lib/index.js
Pinning "@uppy/tus" to https://cdn.jsdelivr.net/npm/@uppy/tus@2.2.2/lib/index.js
...

现在您再次运行./bin/importmap json，并查看是否安装了Uppy

./bin/importmap json

{
  "imports": {
    ...
    "@uppy/core": "https://cdn.jsdelivr.net/npm/@uppy/core@2.1.8/lib/index.js",
    "@uppy/dashboard": "https://cdn.jsdelivr.net/npm/@uppy/dashboard@2.1.4/lib/index.js",
    "@uppy/tus": "https://cdn.jsdelivr.net/npm/@uppy/tus@2.2.2/lib/index.js"
  }
}