html中babel编译vue,【前端】vue-cli3.0.0如何修改babel-loader配置

因为网站使用了vue-cli V 3.4.1,导致出现了iphone下报错

Unexpected keyword ‘const’. Const declarations are not supported in strict mode.

所以参考了https://github.com/mrdulin/bl…

里面说明需要降价webpack-dev-server或者修改babel-loader的配置

于是去vue-cli

官网查看，需要操作 webpack-chain 插件

按照 webpack-chain 文档提供的方法修改了vue.config.js的文件

var path = require('path');

module.exports = {

productionSourceMap: false,

publicPath: process.env.NODE_ENV === 'production' ?

'/' : '/',

chainWebpack: config => {

config.resolve.alias

.set('@', path.resolve('src'))

.set('_c', path.resolve('src/components'))

.set('_conf', path.resolve('config'))

config.module.rule('compile')

.test(/\.js$/)

.include

.add('src')

.add('/node_modules/')

.end()

.use('babel')

.loader('babel-loader')

.options({

presets: [

['@babel/preset-env', {

modules: false

}]

]

});

},

css: {

loaderOptions: {

stylus: {

'resolve url': true,

'import': []

}

}

},

pluginOptions: {

'cube-ui': {

postCompile: true,

theme: false

}

}

}

然后进行编译，报错如下

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration

object that does not match the API schema.

- configuration.module.rules[13].include should be one of these:

RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? } | [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]

-> One or multiple rule conditions

Details:

* configuration.module.rules[13].include should be an instance of RegExp

* configuration.module.rules[13].include should be a string.

* configuration.module.rules[13].include should be an instance of function

* configuration.module.rules[13].include[0] should be an instance of RegExp

* configuration.module.rules[13].include[0]: The provided value "src" is not an absolute path!

* configuration.module.rules[13].include[0] should be an instance of function

* configuration.module.rules[13].include[0] should be an array:

[RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]

* configuration.module.rules[13].include[0] should be an object.

* configuration.module.rules[13].include should be an object.

* configuration.module.rules[13].include[0] should be an instance of RegExp

* configuration.module.rules[13].include[0]: The provided value "src" is not an absolute path!

* configuration.module.rules[13].include[0] should be an instance of function

* configuration.module.rules[13].include[0] should be an array:

[RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]

* configuration.module.rules[13].include[0] should be an object.

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

- configuration.module.rules[13].include should be one of these:

RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? } | [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]

-> One or multiple rule conditions

Details:

* configuration.module.rules[13].include should be an instance of RegExp

* configuration.module.rules[13].include should be a string.

* configuration.module.rules[13].include should be an instance of function

* configuration.module.rules[13].include[0] should be an instance of RegExp

* configuration.module.rules[13].include[0]: The provided value "src" is not an absolute path!

* configuration.module.rules[13].include[0] should be an instance of function

* configuration.module.rules[13].include[0] should be an array:

[RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]

* configuration.module.rules[13].include[0] should be an object.

* configuration.module.rules[13].include should be an object.

* configuration.module.rules[13].include[0] should be an instance of RegExp

* configuration.module.rules[13].include[0]: The provided value "src" is not an absolute path!

* configuration.module.rules[13].include[0] should be an instance of function

* configuration.module.rules[13].include[0] should be an array:

[RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]

* configuration.module.rules[13].include[0] should be an object.

at webpack (D:\github.com\JavaScript\wawp\node_modules\webpack\lib\webpack.js:31:9)

at Promise (D:\github.com\JavaScript\wawp\node_modules\@vue\cli-service\lib\commands\build\index.js:192:5)

at new Promise ()

at build (D:\github.com\JavaScript\wawp\node_modules\@vue\cli-service\lib\commands\build\index.js:191:10)

error Command failed with exit code 1.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

请教大神有没有知道这该如何解决的？？？

回答

经过测试发现是swiper包中的swiper.esm.bundle.js是没有经过babel转换的，所以我在未找到更合适的办法前，将这个文件剔除了

const path = require('path')

function resolve (dir) {

return path.join(__dirname, '..', dir)

}

...

.test(/\.js$/)

.include

.add(resolve('src'))