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

#javascript #webpack #сборка

В проекте имеется директория 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'

    

Ответы

Ответ 1

Для webpack 1 (то есть текущего стабильного документированного) нужно добавить root
в секцию resolve:

var path = require('path');

resolve: {
  root: [
    path.resolve('yourRoot')
  ]
},


yourRoot - расположение желаемого корня. Например текущую директорию для webpack.config.js
можно взять так: path.resolve(__dirname)

path - родной нодовский модуль, ставить отдельно не надо.