Как объединить ReactJS и ваниль Javascript с Laravel Mix - PullRequest
Новая
       78

Как объединить ReactJS и ваниль Javascript с Laravel Mix

0 голосов
/ 01 мая 2020

Я хочу объединить javascript файлы в один файл. Предположим, у меня есть вид Reactjs приложения и ваниль javascript на другой стороне. Это каталог моего проекта: 

src/
    js/
        main.js
    reactjs/
        components/
        index.js
package.json
webpack.mix.js
.eslintrc
.babelrc

Мой webpack.mix. js: 

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

mix.setPublicPath( 'public' );

// webpack config
mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.(jsx|js|vue)$/,
                loader: 'eslint-loader',
                enforce: 'pre',
                exclude: /node_modules/,
                options: {
                    formatter: require('eslint-friendly-formatter')
                }
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx', '.scss', '.sass'],
    }
})

// The temporary directory is set to 'public/src/temp' which is not in my desire.
mix.js( 'src/js/main.js', path.resolve(__dirname, 'src/temp/main.js' ) ).extract( ['lodash'] );
mix.react( 'src/reactjs/index.js', path.resolve(__dirname, 'src/temp/myreact.js') ).extract( ['react', 'react-dom'] );

// Scripts that I want to merge with. It's obviously caused an error. Can't be resolved.
mix.scripts([
    'public/src/temp/main.js',
    'public/src/temp/myreact.js'
], path.resolve(__dirname, 'assets/js/app.js'));

К сожалению, мой каталог public выглядит так после компиляции: 

public/
    assets/
        js/
            app.js
    src/
        temp/
            manifest.js
            vendor.js
            main.js
            myreact.js

    index.html

То, чего я хочу добиться, - это группировать скомпилированные js файлы в каталог temp, расположенный в папке src, а затем объединить их в один файл, предположим, что это app.js.

Is Возможно? Как я могу сделать это в laravel микс?

С уважением.

...