前端框架:vue-cli-service使用中遇到的问题 npm run build -- --report

vue-cli3执行打包命令时候的–report参数无效

项目里的scripts脚本

scripts: {
  "build": "vue-cli-service build && npm run test",
}

npm 执行打包命令的时候 npm run build –report 却没有生成我想要的webpack-bundle-analyzer 分析报告，官网里明确写了支持的

--report 和 --report-json 会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小

vue-cli-service build
刚开始找不到方向直到有一天看到大佬的文章才明白，(后面得学习从源码的角度思考问题)
找到打包命令的文件，打印args入参看下

// node_modules\@vue\cli-service\lib\commands\build\index.js
 console.log(args, '——————args')
 if (args.report || args['report-json']) {
   const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
   console.log(config)
   modifyConfig(webpackConfig, config => {
     const bundleName = args.target !== 'app'
       ? config.output.filename.replace(/\.js$/, '-')
       : isLegacyBuild ? 'legacy-' : ''
     config.plugins.push(new BundleAnalyzerPlugin({
       logLevel: 'warn',
       openAnalyzer: false,
       analyzerMode: args.report ? 'static' : 'disabled',
       reportFilename: `${bundleName}report.html`,
       statsFilename: `${bundleName}report.json`,
       generateStatsFile: !!args['report-json']
     }))
   })
 }

观察到打印的args携带的参数report: false，我发现俩个问题

• 第一点：如果打包脚本是官方原本的命令行打包参数，即vue-cli-service build

scripts: {
  "buildReport": "vue-cli-service build",
}

• 第二点：同时npm执行的时候，需要在–report前面加上–，也就是要这样: npm run build -- --report
  然后我们在看打印参数
  args打印出

  {
    _: [],
    modern: false,
    report: true, // 可行 
    'report-json': false,
    watch: false,
    open: false,
    copy: false,
    https: false,
    verbose: false,
    clean: true,
    target: 'app',
    entry: undefined
  }

  参考npm官网 npm-run-script

总结：

1.npm run build – –report 可行
2.1.npm run build && run build test – –report 不可行
3.yarn run build –report 可行
4.yarn run build && run build test –report 不可行

参考

• npm-run-script
• vue-cli利用webpack-bundle-analyzer分析构建产物