@_gz/upload-sourcemap NPM

作用

用来在webpack生成资源后，把source-map 上传到对应服务器

用法

create-react-app等方式:

const uploadSourceMap = require('@_gz/upload-sourcemap');

  plugins: [
    new uploadSourceMap({
      url: '对应服务器上接口', // http://127.0.0.1:9000/
      remove: false, // true:删除， false:不删除
    }),
    ...
]

// create-react-app
devtool: 'hidden-source-map'

umi或vue-cli通过webpack-chain 的 API 修改 webpack 配置。

export default {
    chainWebpack(memo, { env, webpack, createCSSRule }) {
        memo
            .plugin('uploadSourceMap')
            .use(uploadSourceMap)
            .tap(() => {
                return [
                    {
                        url: '对应服务器上接口',
                        remove: false, // 生产环境下 推荐true, 避免源码导致被看到
                    },
                ];
            });
    },
};

//umi
devtool: 'hidden-source-map'

// vue-cli
productionSourceMap: true
configureWebpack: (config) => {
    config.devtool = 'hidden-source-map';
}

上传参数: formData

file: 文件流
commitHash: git commit hash值
projectName: 项目名称读取package.json name值

说明

记得在webpack配置的时候开启devtool:hidden-source-map
package.json name:项目名称必填
官方devtool

注意事项

需要在生产环境下开启"hidden-source-map", 自行设置环境,以便调试;
插件TerserPlugin: 去除或注释sourceMap: shouldUseSourceMap配置，否则原始sourcemap会被污染，导致定位和文件查询不到
只需要配置js的 sourcemap, css的sourcemap关闭掉;