Laravel mix с RiotJS - PullRequest
Новая
       23

Laravel mix с RiotJS

0 голосов
/ 27 ноября 2018

Я использую PHP 5.6 и Laravel 5.4 для разработки приложения.Я использую RiotJS (https://riot.js.org/) для моего интерфейса. Я изо всех сил пытаюсь скомпилировать мои файлы тегов RiotJS с помощью laravel-mix. Я пытался использовать пакет laravel-mix-riot npm с laravel-mix, но это не такработать для меня. Он компилирует все без ошибок, но, поскольку я написал весь свой Javascript в ES6, скомпилированные коды не похожи на VanillaJS. Функции со стрелками и другие связанные с ES6 вещи остаются в моей общей папке. Из-за этого браузера IE и некоторых браузеровне отображать мое приложение.

Вот мой файл package.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/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"
  }
}

, а вот мой файл webpack.mix.js: - 

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();
}

Может кто-нибудь помочь мне правильно скомпилировать мои файлы JavaScript (с RiotJS). Я видел несколько статей о параметре mix.webpackConfig ({}). Но не знаю, как использовать его для RIotJS. Если вам нужноподробнее, пожалуйста, дайте мне знать. Спасибо

1 Ответ

0 голосов
/ 27 ноября 2018

Я только что нашел решение.Просто добавьте следующие коды в файл 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'
                    }
                }
            ]
        }
    };
});

и добавьте файл .babelrc со следующими кодами 

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