Laravel mix with RiotJS

Question

I'm using PHP 5.6 and Laravel 5.4 to develop an application. I use RiotJS (https://riot.js.org/) for my frontend. I'm struggling to comipile my RiotJS tag files with laravel-mix. I tried using laravel-mix-riot npm package with laravel-mix, but, it doesn't work for me. It compile everything without any error, but since I wrote all my Javascript in ES6, compiled codes are not like VanillaJS. Arrow functions and other ES6 related stuff remain same in my public folder. Because of that IE browser and some browsers are not render my application at all.

Here is my package.json file:-

{
  "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/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "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/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.16.2",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2015-riot": "^1.1.0",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "eslint": "^5.7.0",
    "eslint-config-google": "^0.11.0",
    "jquery": "^3.1.1",
    "jquery-ui": "^1.12.1",
    "jquery-ui-sortable-npm": "^1.0.0",
    "laravel-mix": "^1.7.2",
    "laravel-mix-riot": "^1.1.7",
    "lodash": "^4.17.4",
    "riot-hot-reload": "^1.0.0",
    "riot-observable": "^3.0.0",
    "riot-tag-loader": "^2.1.0",
    "stylelint": "^9.6.0",
    "stylelint-scss": "^3.3.2",
    "vue": "^2.1.10"
  },
  "dependencies": {
    "bootstrap": "^4.1.3",
    "popper.js": "^1.14.4",
    "riot": "^3.12.0",
    "simplebar": "^3.1.0",
    "slick-carousel": "^1.8.1"
  }
}

and, here is my webpack.mix.js file:-

let mix = require('laravel-mix');
mix.riot = require('laravel-mix-riot');

mix.riot('resources/assets/admin/js/app.js', 'public/admin/js').sourceMaps()
    .sass('resources/assets/admin/sass/app.scss', 'public/admin/css').sourceMaps()
    .copyDirectory('resources/assets/admin/img', 'public/admin/img')

    .riot('resources/views/manuals/parent/child/js/app.js', 'public/manuals/parent/child/js').sourceMaps()
    .sass('resources/views/manuals/parent/child/sass/app.scss', 'public/manuals/parent/child/css').sourceMaps()
    .copyDirectory('resources/views/manuals/parent/child/img', 'public/manuals/parent/child/img')
    .copyDirectory('resources/views/manuals/parent/child/fonts', 'public/manuals/parent/child/fonts')

if (mix.inProduction()) {
    mix.version();
}

Can anyone please help me to compile my JavaScript files (With RiotJS) properly. I saw some articles about mix.webpackConfig({}) option. But don't know how to use it for RIotJS. If you need any further details, please let me know. Thanks

Answer 1

I just found a solution. Just add the following codes inside the webpack.mix.js

mix.webpackConfig(webpack => {
    return {
        entry: {
            'manuals/ericsson_net/brandhouse/js': './resources/views/manuals/parent/child/js/app.js'
        },
        output: {
            filename: '[name]/app.js',
            path: path.resolve(__dirname + '/public')
        },
        module: {
            rules: [
                {
                    test: /\.tag$/,
                    exclude: /node_modules/,
                    loader: 'riot-tag-loader',
                    query: {
                        type: 'es6',
                        hot: true
                    }
                },
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader'
                    }
                }
            ]
        }
    };
});

and add .babelrc file with bellow codes

{
    "presets": [
        "es2015-riot"
    ]
}