Webpack псевдоним с Laravel mix в NPM Разработка пакета - PullRequest
Новая
       5

Webpack псевдоним с Laravel mix в NPM Разработка пакета

1 голос
/ 09 марта 2020

Я пытаюсь создать пакет npm с приложением laravel-mix / webpack, я хочу иметь псевдоним для определенной структуры папок, поэтому я набросал часть файла webpack.config.js

webpack.config. js

/**
 * As our first step, we'll pull in the user's webpack.mix.js
 * file. Based on what the user requests in that file,
 * a generic config object will be constructed for us.
 */
let mix = require('laravel-mix');

let ComponentFactory = require('laravel-mix/src/components/ComponentFactory');

new ComponentFactory().installAll();

require('./webpack.mix');

/**
 * Just in case the user needs to hook into this point
 * in the build process, we'll make an announcement.
 */

Mix.dispatch('init', Mix);

/**
 * Now that we know which build tasks are required by the
 * user, we can dynamically create a configuration object
 * for Webpack. And that's all there is to it. Simple!
 */

let WebpackConfig = require('laravel-mix/src/builder/WebpackConfig');

module.exports = new WebpackConfig().build();

У меня файл webpack.mix. js, который упоминается в методе require: 

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

const tailwindcss = require('tailwindcss');

mix.copy('node_modules/nitseditor-frontend/Assets/images', 'public/nits-assets/images')
    .sass('node_modules/nitseditor-frontend/Assets/sass/app.scss', 'nits-assets/css')
    .options({
        processCssUrls: false,
        postCss: [ require('autoprefixer'), tailwindcss('./tailwind.config.js') ],
    })
    .js('node_modules/nitseditor-frontend/Assets/js/app.js', 'nits-assets/js')
    .webpackConfig({
        node: {
            fs: "empty"
        },
        output: {
            publicPath: '/',
            chunkFilename: 'nits-assets/chunks/[name].[chunkhash].js',
        },
        resolve: {
            extensions: ['.js', '.json', '.vue'],
            alias: {
                NitsModels: path.resolve(__dirname, 'node_modules/nitseditor-frontend/Models'),
                ProjectComponents: path.resolve(__dirname, 'resources')
            }
        }
    })
    .sourceMaps().version().browserSync('nitsapp.local');

Все работает нормально, я имею в виду, что порции генерируются, никаких проблем со структурой папок активов, только проблема сохраняется в alias Я пытаюсь импортировать в свой шаблон как: 

import {login} from 'NitsModels/config/_model'


export default {
    name: "LoginLayoutOne",
    data() {
        return {
            email: '',
            password: '',
            error: '',
        }
    },
    beforeCreate() {
        console.log('check');
        this.$auth.logout();
    },
    methods: {
        login() {
            this.loading = true;
            this.error = "";
            const user = {
                email: this.email,
                password: this.password
            };

            login(user).then(resolve => {
                this.loading = false;
                // console.log(resolve.redirect);
                this.$router.push(resolve.redirect)
            }).catch(error => {
                this.loading = false;
                this.error = error
            });
        }
    }
}

и мой npm скрипт / пакет. json файл выглядит так: 

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/nitseditor-frontend/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/nitseditor-frontend/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/nitseditor-frontend/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "browser-sync": "^2.26.7",
        "browser-sync-webpack-plugin": "^2.0.1",
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "nitseditor-frontend": "0.0.2",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.26.2",
        "sass-loader": "^8.0.2",
        "tailwindcss": "^1.2.0",
        "vue": "^2.6.11",
        "vue-router": "^3.1.6",
        "vue-template-compiler": "^2.6.11"
    },
    "dependencies": {
        "babel-plugin-syntax-dynamic-import": "^6.18.0",
        "laravel-mix-alias": "^1.0.2",
        "vuex": "^3.1.2"
    }
}

Не знаю, почему он не может найти файлы: 

ERROR  Failed to compile with 1 errors
12:42:01 AM
This dependency was not found:
* NitsModels/config/_model in ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!/Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save NitsModels/config/_model
                                       Asset      Size               Chunks                         Chunk Names
                      /nits-assets/js/app.js  8.74 MiB  /nits-assets/js/app  [emitted]              /nits-assets/js/app
nits-assets/chunks/0.aabd72aaac8025782e17.js  54.5 KiB                    0  [emitted] [immutable]  
nits-assets/chunks/1.09bd4a0c45db3c2f579e.js  24.5 KiB                    1  [emitted] [immutable]  
                     nits-assets/css/app.css  24.1 KiB  /nits-assets/js/app  [emitted]              /nits-assets/js/app
ERROR in /Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!/Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve 'NitsModels/config/_model' in '/Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage'
 @ /Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!/Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&type=script&lang=js&) 53:0-59 78:6-12
 @ /Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&type=script&lang=js&
 @ /Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue
 @ /Users/nitishkumar/Dev/npm/nitseditor-frontend/Assets/js/routes.js
 @ /Users/nitishkumar/Dev/npm/nitseditor-frontend/Assets/js/app.js
 @ multi ./node_modules/nitseditor-frontend/Assets/js/app.js ./node_modules/nitseditor-frontend/Assets/sass/app.scss
[Browsersync] Proxying: http://nitsapp.local
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.113:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Watching files...

1 Ответ

0 голосов
/ 15 марта 2020

Одна вещь, которую я не упомянул, это то, что я разрабатывал пакет npm локально и пытался создать символическую ссылку на мой библиотечный файл, что могло привести к отсутствию ответа на мой вопрос, постепенно я понял, что мне нужно разрешить с помощью символических ссылок на false. Итак, я перенастроил свой webpack.mix.js файл на: 

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

const tailwindcss = require('tailwindcss');

mix.copy('node_modules/nitseditor-frontend/Assets/images', 'public/nits-assets/images')
    .sass('node_modules/nitseditor-frontend/Assets/sass/app.scss', 'nits-assets/css')
    .options({
        processCssUrls: false,
        postCss: [ require('autoprefixer'), tailwindcss('./tailwind.config.js') ],
    })
    .js('node_modules/nitseditor-frontend/Assets/js/app.js', 'nits-assets/js')
    .webpackConfig({
        node: {
            fs: "empty"
        },
        output: {
            publicPath: '/',
            chunkFilename: 'nits-assets/chunks/[name].[chunkhash].js',
        },
        resolve: {
            symlinks: false,
            extensions: ['.js', '.json', '.vue'],
            alias: {
                NitsModels: path.resolve(__dirname, 'node_modules/nitseditor-frontend/Models'),
            }
        }
    })
    .sourceMaps().version();

Если вы видите, что мой webpackConfig() имеет resolve до symlinks: false. Надеюсь, это кому-нибудь поможет.

...