Question

我正在使用PHP 5.6和Laravel 5.4开发应用程序。我在前端使用RiotJS（https://riot.js.org/）。我正在努力将laravel-mix转换为RiotJS标记文件。我尝试将laravel-mix-riot npm软件包与laravel-mix一起使用，但是它对我不起作用。它可以编译所有内容，没有任何错误，但是由于我用ES6编写了所有Javascript，因此编译后的代码不像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中使用它。如果您需要更多详细信息，请告诉我。谢谢

Answer 1

我刚刚找到了解决方案。只需在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"
    ]
}

Laravel与RiotJS混合

1 个答案: