Псевдоним веб-пакета в Laravel Mix для node_modules - PullRequest
Новая
       14

Псевдоним веб-пакета в Laravel Mix для node_modules

0 голосов
/ 25 апреля 2019

Я хотел бы использовать псевдоним в VUE.JS в проекте Laravel 5.8 для импорта css и js, которые есть в моем модуле.

webpack.mix.js 

mix.webpackConfig({
resolve: {
    alias: {
        'alias':  path.resolve(
            __dirname,
            '~myModule/src'
        )
     }
   }
});

В моем VUE App.js я хотел бы импортировать папку css, и я написал:

resources / js / app.js 

// css files
import 'alias/lib/css'

// js files
import 'alias/lib/script'

Но я ошибаюсь, потому что псевдоним не разрешен:

ОШИБКА в ./resources/js/app.js Модуль не найден: Ошибка: не удается разрешить псевдоним / lib / css'in ...

Можете ли вы помочь мне решить проблему?

1 Ответ

0 голосов
/ 26 апреля 2019

После стольких попыток у меня возникла проблема.Код был хорош, но мне не хватало для правильной загрузки webpack.mix.js:

Из документации Laravel Mix:

Файл webpack.mix.jsфайл - это ваша точка входа для всей компиляции активов.Думайте об этом как обертку легкой конфигурации вокруг Webpack.Смешанные задачи можно объединить в цепочку, чтобы точно определить, как должны компилироваться ваши ресурсы.

Но если вы используете npm run watch , он не перезагружается перед тем, как скомпилировать новыйизменились активы.Это означает:

, если вы находитесь в режиме наблюдения ( npm run watch ), выйдите и перезапустите его, чтобы загрузить новый обновленный webpack.config.js , если вы его изменили.

Наконец-то это сработало!И он правильно разрешает новый псевдоним!

Вот финальная конфигурация, которую я использовал в webpack.config.js : 

mix.webpackConfig({
resolve: {
    alias: {
        'aliasName':  path.resolve(
            __dirname,
            'node_modules/MyModule/src/'
        )
     }
   }
});

Другая альтернатива: 

mix.webpackConfig({
    resolve: {
        modules: [
            'node_modules'
        ],
        alias: {
            'aliasName' : 'MyModule/src/'
        }
    }
});

Затем в моем компоненте Vue (или на всякий случай в app.js) 

 <template>

     <myModule-component></myModule-component>

 </template>

    require('aliasName/lib/css');      // to load full css directory
    require('aliasName/lib/script');   // to load full js directory

    import MyModuleComponent from 'aliasName/widgets/MyModuleComponent.vue'

    ...
    export default {
        ...
        components: {
           'myModule-component': MyModuleComponent
        }
...