source-map-webpack-plugin

说明

webpack插件简化了CLI上传sourcemap流程, 可以更好的集成到项目的版本发布中。

使用

1. 安装

进入前端项目的根目录，通过npm安装:

npm install @tingyun-common/source-map-webpack-plugin --save-dev

2. 在webpack配置中加入sourcemap插件

// 导入sourcemap插件
const TingyunSourceMapWebpackPlugin = require('@tingyun-common/source-map-webpack-plugin');

module.exports = {
  // 建议只在生产模式使用
  mode: 'production',

  //... 
  plugins: [
    new TingyunSourceMapWebpackPlugin({
      // 指定打包生成的文件目录, 根据实际情况填写, 例如: './dist'
      include: '<上传目录或文件>',
      // 设置上传sourcemap的版本号, 如果不设置, 插件会自动生成, 例如; V1.0.0
      release: '<版本号>'
      // 指定上传的配置信息。如果当前项目目录存在tingyun-cli配置文件.tingyunclirc 或 .tingyunclirc.toml可以不写
      beacon: '<上传地址>',
      appToken: '<app_token>',
      token: '<access_token>',
      productType: '<产品类型>', //web或mp
    }),
    // ...
    // 其他插件
  ],
};

• webpack插件在每次执行时都会创建版本并上传sourcemap, 建议只在生产环境打包时执行插件, 防止大量不必要的版本上传！。 参考webpack官方文档, 生产打包的最佳实践。
• 如果当前目录存在tingyun-cli配置文件.tingyunclirc或.tingyunclirc.toml, webpack插件配置中可以不设置上传信息。

Demo项目

项目地址

配置示例

下面列举了流行的脚手架项目的使用方式。根本目的是在webpack配置中加入听云sourcemap插件, 如果下列参考配置没有覆盖你的使用场景, 请根据实际情况配置。

使用前首先确保已经安装webpack插件:

npm install @tingyun-common/source-map-webpack-plugin --save-dev

然后参考下列配置操作

create-react-app

建议使用react-app-rewired来增加webpack插件。如果你的项目中已经使用eject脚本暴露了webpack配置, 请自行分析项目配置添加webpack插件。

示例使用的版本:

create-react-app 4.0.3

1. 安装react-app-rewired

npm install react-app-rewired --save-dev

2. 修改package.json脚本的script部分, 使用react-app-rewired替换react-scripts

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},

3. 在项目根目录添加或修改config-overrides.js

const TingyunSourceMapWebpackPlugin = require('@tingyun-common/source-map-webpack-plugin');

module.exports = {
    webpack: (config) => {
        if (process.env.NODE_ENV === "production") {
            if (!config.plugins) {
                config.plugins = [];
            }
            // 生产环境加入webpack插件
            config.plugins.push(
                new TingyunSourceMapWebpackPlugin({
                    include: "./build",
                    // 其他配置
                })
            )
        }
        return config;
    },
  }

4. 打包

npm run build

执行打包命令后, 控制台会打印插件输出的上传信息。

vue-cli

示例使用的版本:

@vue/cli 4.5.13

1. 创建或修改vue.config.js文件

const TingyunSourceMapWebpackPlugin = require('@tingyun-common/source-map-webpack-plugin');

module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "production") {
      // 生产环境加入webpack插件
      config.plugins.push(
          new TingyunSourceMapWebpackPlugin({
            include: "./dist",
            // 其他配置
          })
      )
    }
  },
};

2. 打包

打包命令请根据实际情况填写, 默认是build

npm run build

执行打包命令后, 控制台会打印插件输出的上传信息。

angular-cli

示例使用的版本

Angular CLI: 12.0.4

1. 进入项目目录安装@angular-builders/custom-webpack

npm install @angular-builders/custom-webpack --save-dev

2. 修改angular.json

"projects": {
  ...
  // [project]是实际项目名
  "[project]": {
    ...
    "architect": {
      ...
      // 修改对应的ng命令, 此处以修改build为例
      "build": {
        // 修改默认builder
        // "builder": "@angular-devkit/build-angular:browser",
        "builder": "@angular-builders/custom-webpack:browser"
        "options": {
          // 增加自定义webpack文件配置
          "customWebpackConfig": {
              // webpack配置文件名称, 名称自定义
              "path": "./webpack.config.js"
          }
        },
        "configurations": {
          "production": {
            // 如果没有开启sourcemap生成, 设置开启sourcemap
            "sourceMap": true
          }
        }

3. 修改/创建webpack配置文件

此处配置文件的生成位置取决于angular.json中配置的路径

webpack.config.js

const TingyunSourceMapWebpackPlugin = require('@tingyun-common/source-map-webpack-plugin');

module.exports = (config, options) => {
    if (config.mode === "production") {
        if (!config.plugins) {
            config.plugins = [];
        }
        config.plugins.push(
            new TingyunSourceMapWebpackPlugin({
              include: "./dist",
              // 上传配置可以在此处指定或者创建cli配置文件
            })
        )
    }

    return config;
};

4. 打包

npm run build

执行打包命令后, 控制台会打印插件输出的上传信息。