Question

我正在使用Vuex构建Vue应用程序，并希望使用...运算符来合并对象，但我似乎无法安装Babel转换器。

这是我的配置文件。它是最后一个const定义，也是插件数组中的最后一个条目，也就是问题。

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

/** here is where I load the object rest spread transformation **/
const RestSpreadTransform = require('babel-plugin-transform-object-rest-spread');

module.exports = {
    entry: {
        admin : './resources/assets/js/admin/admin.js',
        staff : './resources/assets/js/staff/staff.js'

    },
    watch: true,
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    module: {
        rules : [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            },
            { test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader','sass-loader'],
                })
            },
            { test: /\.(svg|ttf|woff|woff2|eot)$/,
                use: [{ loader: 'file-loader',
                    options: { outputPath: 'fonts', publicPath: '/dist/fonts'} }]
            },
            {
                test: require.resolve("./bower_components/typeahead.js/dist/typeahead.jquery.js"),
                use: "imports-loader?define=>false"
            },
            {
                test: require.resolve("./bower_components/typeahead.js/dist/bloodhound.js"),
                use: "imports-loader?define=>false"
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                exclude: /bower_components/,
                options: {
                    js: {
                        loader: 'babel-loader'
                    }
                }
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['public/dist']),
        new ManifestPlugin({ fileName : 'mix-manifest.json' }),
        new ExtractTextPlugin({ filename: 'css/[name].css' }),
        new CopyWebpackPlugin([{from:'./resources/assets/images',to:'images'}]),

        /** Here is where I instantiate the object rest spread transformation  **/
        new RestSpreadTransform({})
    ],
    output: {
        path: path.resolve(__dirname, 'public/dist'),
        filename: 'js/[name].js'
    }
};

根据https://babeljs.io/docs/plugins/transform-object-rest-spread/

的说明，我已使用npm install --save-dev babel-plugin-transform-object-rest-spread安装了变压器

当我尝试构建项目时，它会出现以下错误：

TypeError: arguments[i].apply is not a function
    at Compiler.apply (/home/vagrant/Code/Client1/Project1/node_modules/tapable/lib/Tapable.js:375:16)
    at webpack (/home/vagrant/Code/Client1/Project1/node_modules/webpack/lib/webpack.js:33:19)
    at processOptions (/home/vagrant/Code/Client1/Project1/node_modules/webpack/bin/webpack.js:335:15)
    at yargs.parse (/home/vagrant/Code/Client1/Project1/node_modules/webpack/bin/webpack.js:397:2)
    at Object.Yargs.self.parse (/home/vagrant/Code/Client1/Project1/node_modules/webpack/node_modules/yargs/yargs.js:533:18)
    at Object.<anonymous> (/home/vagrant/Code/Client1/Project1/node_modules/webpack/bin/webpack.js:152:7)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Function.Module.runMain (module.js:684:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3

我哪里错了？如您所见，我已经配置了许多其他插件，没有任何问题。

Answer 1

这是一个巴贝尔，不是一个webpack，插件。

要使用它，请执行babel-loader配置：

        use: {
            loader: 'babel-loader',
            options: {
                presets: ['env'],
                plugins: [require('babel-plugin-transform-object-rest-spread')] // added
            }
        }

而且，如果您还没有，至少创建一个空的.babelrc文件。

这样，您就可以在问题中显示的代码中从new RestSpreadTransform({})中删除plugins:。

配置Webpack，Node和Babel对象rest spread变换

1 个答案: