Страницы

Поиск по вопросам

суббота, 27 октября 2018 г.

Как правильно импортировать модуль JavaScript

В проекте имеется директория frontend следующей структуры:
├── common ├── static    ├── css    ├── js      └── common.js ├── node_modules ├── package.json ├── app ├── static    ├── css    ├── js      └── script1.js └── script2.js └── webpack.config.js
Классы и некоторые методы, которые я определил в common.js, мне нужны в script1.js и script2.js. Я их импортировал как
import './common/static/js/common.js' import { Class1, Class2 } from './common/static/js/common.js'
Но при сборке webpack --display-error-details сообщает об отсутвующем модуле
ERROR in ./app/static/app/js/settings.js Module not found: Error: Cannot resolve 'file' or 'directory' ./common/static/js/common.js in .../frontend/app/static/table/js resolve file
.../frontend/app/static/table/js/common/static/js/common.js doesn't exist
То есть webpack ищет файл в том же каталоге, где располгается вызывающий скрипт, а не каталог frontend
Я понимаю, что могу задать инструкцию импорта вида ../../../../../../script.js, но это выглядит не очень.
Можно сделать так, чтобы webpack искал относительно заданного мной каталога, в данном случае frontend?
Сейчас часть конфига с resolve выглядит так:
resolve: { moduleDirectories: ['node_modules'], extension: ['', '.js', '.styl'] },

Дополнение. Импорт прошел успешно только после того, как добавил в конфиг директорию с импортируемым скриптом:
resolve: { root: [ path.resolve('./common/static/js'), ], moduleDirectories: ['node_modules'], extension: ['', '.js', '.styl'] },
Почему добавляется в качестве корня этот каталог и не добавляется каталог, в котором лежит конфиг?

Ошибка исправлена - неправильно записывал импорты. Настройки вебпака из ответа Утки
resolve: { root: [ path.resolve(__dirname), ], moduleDirectories: ['node_modules'], extension: ['', '.js', '.styl'] },
Поправил импорт
import { capitalizeFirstLetter, formatString } from 'common/static/js/common.js'; import { elementByClass, elementById } from 'common/static/js/common.js'


Ответ

Для webpack 1 (то есть текущего стабильного документированного) нужно добавить root в секцию resolve
var path = require('path');
resolve: { root: [ path.resolve('yourRoot') ] },
yourRoot - расположение желаемого корня. Например текущую директорию для webpack.config.js можно взять так: path.resolve(__dirname)
path - родной нодовский модуль, ставить отдельно не надо.

Комментариев нет:

Отправить комментарий