Webpack выдает ошибку, когда я пытаюсь импортировать каталог, содержащий модули - PullRequest
Новая
       26

Webpack выдает ошибку, когда я пытаюсь импортировать каталог, содержащий модули

1 голос
/ 09 ноября 2019

Я пытаюсь создать небольшую библиотеку npm, чтобы интерфейс с API стал немного лучше. Моя структура папок выглядит следующим образом ... 

dist/
  index.js
src/
  index.js
  endpoints/
    endpoint1.js
package.json
webpack.config.js

В моем файле src / index.js у меня есть .. 

import {endpoint1} from './endpoints'

module.exports = class lib {
 ...
}

Когда я npm запускаю сборку (который запускает webpack --display-error-details --mode production ) webpack выдает большую ошибку, говоря «Модуль не найден: Ошибка: не удается разрешить« ./endpoints »в« моем »\ project \ dir \ src '.

Мой файл webpack.config.js в настоящее время выглядит так ... 

const path = require('path');

module.exports = {
    mode: 'production',
    entry: path.join(__dirname, '/src/index.js'),
    output: {
        path: path.resolve('dist'),
        filename: 'index.js',
        libraryTarget: 'commonjs2'
    },
    module: {
        rules: [
            {
                test: /.js?$/,
                exclude: /(node_modules)/,
                use: 'babel-loader'
            }
        ]
    },
    resolve: {
        modules: [

            path.resolve(__dirname, 'src/endpoints')
        ],
        extensions: ['.js']
    }
};

Я вижу, что подобные вопросы уже задавались ранее, иПеречисленные разрешения, кажется, не работают для меня, поэтому я решил опубликовать их, если я сделаю ошибку новичка. Если потребуется дополнительная информация, просто скажите! Извините, если это довольно стена текста. Спасибо.

Ответы [ 2 ]

2 голосов
/ 09 ноября 2019

Правильный импорт будет: 

 import endpoint1 from 'endpoint1';

Используя resolve.modules, вы указываете Webpack искать не относительные пути в этой папке. Имя модуля - "enpoint1".

Но на самом деле вы должны делать это только с библиотеками, которые вы используете в своем проекте, для конечной точки будет подходящим относительный импорт: 

 import endpoint1 from "./endpoints/endpoint1";
0 голосов
/ 09 ноября 2019

import {endpoint1} from './endpoints' означает следующее: импортировать из файла ./endpoints/index.js что-то, что экспортируется под именем enpoint1 в этом файле. Если вы импортируете каталог, то он ссылается на index.js в этом каталоге, а не на все остальные файлы. Он не существует в вашей настройке.

Имена внутри {} относятся к именованным импортам. Это относится только к импорту в стиле es6 modules, например import {...} from. Если вы пропустите {}, вы импортируете значение по умолчанию. CommonJs стиль импорта, такой как const {...} = require(''), работает по-другому. У CommonJs нет именованных импортов и экспортов. Он просто импортирует значение по умолчанию из этого файла и затем извлекает поле с помощью деструктуризации объекта.

То, что вы экспортируете, является чем-то безымянным (то есть по умолчанию) из файла ./endpoints/enpoint1.js

Что-то не названо, потому что вы используетеmodule.exports = который является CommonJS в стиле экспорта. CommonJS не поддерживает именованные экспорты. Это эквивалентно export default class lib ... при экспорте в стиле es6 modules.

Если вы хотите импортировать много файлов в каталог , вы можете рассмотреть следующие решения:

1)Часто создаются отдельные точки импорта. Вы делаете index.js файл. В нем вы импортируете вручную каждый файл под директой, которую хотите экспортировать. Затем вы экспортируете его под именами. Например: 

import a from './a.js';
import b from './b.js';
import c from './c.js';

export { a, b, c };

Тогда это будет работать

2) В некоторых редких случаях может понадобиться использовать fs.readdir или fs.readdirSync для сканирования всего каталога и динамически require файлы в цикле. Используйте это только если вы должны. Например, миграции базы данных.

...