Как с laravel-mix использовать import js-файла без применения относительных путей?

Question

[igortelmenko]

Приветствую всех!

Сейчас Laravel для сборки js (как и css) использует webpack. Laravel использует webpack не напрямую, а при посредничестве laravel-mix. Это, с одной стороны, - помогает, а другой - накладывает свои ограничения и трудности.

Подключаю внутри одного js-файла другой, используя import:

import Vuetable from 'vuetable-2/src/components/Vuetable' // Путь относительно node_modules
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
import CssConfig from '../../VuetableCssConfig' // Путь относительно текущего файла

Пока подключаем то, что лежит в node_modules (как в первых двух строках), все нормально. Но как только нужно подключить свой файл, то приходится прибегать к указанию пути относительно текущего (как в третьей строке). Что не очень, я считаю, красиво и удобно, если файл используется несколькими другими файлами.

Хотелось бы для своих файлов иметь возможность указать путь относительно папкиresources/accets/js:

import CssConfig from 'components/VuetableCssConfig'

Но, если сделать так, то когда запускаем npm run watch (ну или dev, production - не важно), сборщик не видит подключаемого файла. Думаю, что это из-за того, что ищет он в node_modules.

Прочитал ES6 Import Statement Without Relative Paths Using и Laravel 5.5: Custom Webpack Configuration.

Пробовал указать в webpack.min.js:

...
let path = require('path');

mix.webpackConfig({
    resolve: {
        modules: [
            path.resolve('./resources/assets/js'),
            path.resolve('./node_modules')
        ]
    }
});

и еще различные вариации (в том числе с __dirname, как во второй статье). Но результат тот же. Файл при сборке не находится.

Текст ошибки, на всякий случай:

This dependency was not found:

* components/VuetableCssConfig in ./~/babel-loader/lib?{"cacheDirectory":true,"presets":[["es2015",{"modules":false}]]}!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/earnings/EarningsTable.vue

To install it, you can run: npm install --save components/VuetableCssConfig

Может кто подскажет как сделать так, чтобы webpack искал не только в node_modules, но и в других, нужных, папках. Ну или другой способ, который позволит избежать указания пути относительно текущего js-файла.

Comments

[JhaoDa]

Хватит сюда ларавел приплетать, мнения модератора, принявшего мои правки, вам мало?

[igortelmenko]

В смысле "приплетать"? Здесь как раз есть особенность в том, что используется laravel, так как он использует не напрямую webpack, а при посредничестве laravel-mix. Надо понимать специфику и знать как это устроено. Знанием только webpack здесь не помочь.

Точно то же могу сказать и об уровне. Стоял Middle. Поправили на Junior, но 2 дня уже не могут подсказать решение. Ничего так себе junior.

[Данакт Фрост]

igortelmenko, вопрос действительно джуновский, никак не миддл. Другой вопрос в том, что на тостере мало мало миддлов.

[sim3x]

JhaoDa,
ларавел микс отдельно на фронте кто-то использует?

[sim3x]

igortelmenko,
покажите ошибки

[igortelmenko]

Данакт Фрост, я думаю вы вопрос не дооцениваете.

[igortelmenko]

sim3x, текст ошибки добавил в главный пост

[sim3x]

igortelmenko, а где сам компонент находится относительно ~ ?

[igortelmenko]

Вообще подобный финт с путями у кого-нибудь работает?

[igortelmenko]

Интересно было бы чтобы те, кто поставили сложность Intern предложили бы решение.
А то вот Данакт Фрост в ответах уже столько напредлагал (кстати, толкового! и явно не джуновского) и пока решение не найдено.

[igortelmenko]

Приемлемое решение найдено. Спасибо, Данакт Фрост, за долгий поиск решения!

Answer 1

[Данакт Фрост]

Так может просто использовать алиасы для нужных директорий?

Comments

[igortelmenko]

Делаю в webpack.min.js:

...
let path = require('path');

mix.webpackConfig({
    resolve: {
        alias: {
            Components: path.resolve(__dirname, 'resources/assets/js/components')
        }
    }
});
...

Затем в файле:

~/projects/project056/resources/assets/js/components/frontend/stat/EarningsTable.vue

import CssConfig from 'Components/VuetableCssConfig'

Файл
~/projects/project056/resources/assets/js/components/VuetableCssConfig.js

имеется.

Запускаю npm run dev, получаю:

This dependency was not found:

* Components/VuetableCssConfig in ./~/babel-loader/lib?{"cacheDirectory":true,"presets":[["es2015",{"modules":false}]]}!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/frontend/stat/EarningsTable.vue

[Данакт Фрост]

igortelmenko, проблема может быть только одна: вы неверно прописали путь

[igortelmenko]

Ну, вот пути выши приведены. Если бы было где-то неверно, то наверное бросилось бы вам в глаза?

[Данакт Фрост]

igortelmenko, не бросилось бы, я не знаю где находится конфиг, не знаю где относительно конфига находится ваша папка с исходниками

[igortelmenko]

В laravel все стандартно. Ничего не менял.
Я понимаю, что вопрос кажется элементарным. Но с учетом того, что у Ларавела свой конфиг над конфигом вебпака и нет возможность посмотреть в какой путь преобразуется строка переданная в import все становится не такими тривиальным.

[igortelmenko]

Как можно посмотреть во что в итоге преобразовалась строка

import CssConfig from 'Components/VuetableCssConfig'

?

[Данакт Фрост]

Создайте js-файл с нижеприведённым содержанием рядом с вашим webpack-конфигом и запустите его.

const path = require('path')
console.log(path.resolve(__dirname, 'resources/assets/js/components'))

[igortelmenko]

Это я уже делал. Там путь правильный
Я говорю о том, что не понятно что получается тут:

import CssConfig from 'Components/VuetableCssConfig'

[Данакт Фрост]

igortelmenko, возможно я ввожу вас в заблуждение. Попробуйте использовать плагин для babel вроде babel-plugin-webpack-alias. Скорее всего webpack знает о алиасах, а babel — нет. Плагин должен использовать установленные в конфиге вебпака алиасы.

[igortelmenko]

Наверное это уже где-то близко к решению.
Но не ясно как в Laravel подключить к вебпаку этот модуль.

В конфиге есть блок

.webpackConfig({
        plugins: [
            new WebpackRTLPlugin('/css/[name].rtl.css')
        ]
    })

Но добавить в plugins: [] нужно функцию, а не массив, как в документаии плагина:

[ "babel-plugin-webpack-alias" ...]

А в документации Laravel это не описано.

[igortelmenko]

Laravel в свою очередь использует пакет laravel-mix. А для него я нашел свежий багрепорт по данной теме. Так что не все так просто.

[Данакт Фрост]

igortelmenko, вы не в плагины вебпака это вставляйте, в плагины babel'а.

[igortelmenko]

Если бы еще в документации к laravel-mix или laravel была информация как это сделать...

[Данакт Фрост]

igortelmenko, в документации babel написано как это сделать

[igortelmenko]

Если бы так было просто. Там написано

Add it as a plugin to your .babelrc file

А при работе через laravel-mix, похоже, нет такого файла. Если бы был, я бы легко добавил и не спрашивал бы на форуме.

[Данакт Фрост]

igortelmenko, в webpack.config есть упоминания про babel-loader?

[igortelmenko]

В laravel как такового нет webpack.config. Он спрятан в потрохах пакета laravel-mix.

Предполагается, что все настройки вебпака делаются через webpack.min.js

И совсем в крайних случаях делается копия webpack.config, что, собственно, может подкинуть проблем при обновлениях.

Но в laravel-mix есть babel-loader в package.json.

[Данакт Фрост]

igortelmenko, https://github.com/JeffreyWay/laravel-mix/blob/mas...
Если верить этим строкам, вы можете в корне создать .babelrc и прописать всё что вам нужно

[igortelmenko]

Сделал .babelrc

{
  "plugins": [
    [ "babel-plugin-webpack-alias", { "config": "node_modules/laravel-mix/setup/webpack.config.js" } ]
  ]
}

Но ошибка та же осталась:

This dependency was not found:

* Components/VuetableCssConfig in ./~/babel-loader/lib?cacheDirectory!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/earnings/EarningsTable.vue

To install it, you can run: npm install --save Components/VuetableCssConfig

Но файл .babelrc действительно подхватывается. Если путь к веб-пак конфиг в нем убрать, то пишет, что не может найти конфиг.

Как бы отладить и увидеть во что разворачивается алиас?

[Данакт Фрост]

igortelmenko, попробуйте еще обойтись без алиасов внутри вебпака. Напр, babel-plugin-module-alias

[igortelmenko]

Данакт Фрост, с этим плагином получилось.

Сделал .babelrc:

{
  "plugins": [
    ["module-alias", [
      { "src": "./resources/assets/js/components", "expose": "components1" }
    ]]
  ]
}

И подключал файл как

import CssConfig from 'components1/VuetableCssConfig';

Но не пока не понял чем по сути своей работы отличаются эти два плагина. Какие у каждого недостатки? Почему один может без вебпака обходиться, а другой - нет?

[Данакт Фрост]

igortelmenko, отличия только лишь в том, как кому больше нравится. Просто в webpack'е есть встроенный функционал для создания алиасов и babel его не воспринимает, а для того, чтобы воспринимал нужен плагин. А можно не использовать встроенный фуцнкционал webpack'а, и использовать другой плагин babel и прописывать алиасы в его настройках.

[igortelmenko]

Данакт Фрост, спасибо большое за помощь. С алисами будет даже удобнее, чем с указнием путей для сканирования.

Странно правда, что оно не работало. И что первый плагин не работал. Возможно версия babel с проблемами и надо ее обновить. Owner laravel-mix, похоже, говорит, что у него работают алиасы и без плагинов. Возможно у нас разные версии babel.... Думаю, что буду еще пробовать заставить работать без плагинов.