如何正确导出/导入模块以在JavaScript中使用库

Question

I want to write a javascript library with two files:

snabbpixi.js

export function init() {
}

pixiapi.js

export function createElement() {
}

I want to use this library like this:

import { init } from 'snabbpixi';
import { createElement } from 'snabbpixi/pixiapi';

If I don't do anything and set the package.json for library as:

{
  "main": "src/snabbpixi.js"
}

second import doesn't work ( import { createElement } from 'snabbpixi/pixiap' )

If I compile this library and export as umd format using webpack it also doesn't work.

How can I configure my library so I can import like this:

import { createElement } from 'snabbpixi/pixiap'

Answer 1

I normally do this sort of thing in TypeScript rather than straight JavaScript, but hopefully this works in basically the same way...

Try creating a new file (typically named index.js ), with contents like this:

export * from './snabbpixi'; // Adjust paths as needed for your particular case.
export * from './snabbpixi/pixiapi';

Then make index.js your main .

The import you would use would then be flattened-out, however, looking more like:

import { init, createElement } from 'snabbpixi';

Answer 2

When you are using import { Something } from 'somewhere' you are calling on a named export from a given file or directory.

If the two files are in different directories then you can add an index.js file to each directory and then use export { default as function } from './file' To do this you would have to export the default file from pixiapi and snabbpixi .

If you have both files importing into your index.js then you will still want to export them as defaults. But then you would do the following..

import file1 from './file1'
import file2 from './file2'

export default {
file1,
file2,
}

This will allow you to use the named imports as well and keep them in the same directory