前端项目中增加全局常量设置

项目中需要增加一些设置值,有些会影响feat,有些只是单纯的展示,比如站点名称。一种是在TS/JS这种程序代码中,设置一种是非程序文件-配置文件中设定,比如自定义一个file文件,或者常用的package.json。

针对后者,如何优雅去做呢,这里贴出我的一种方案。

具体做法

  1. package.json中增加自定义字段配置项

    1
    2
    3
    4
    "chainConfig": {
    "sdkVersion": "v2.1.0",
    "subscribeMinSdkVersion": "v2.0.0"
    }

    注意,自定义字段不要以下划线来命名,且避开保留字。

  2. webpack中读取package.json中字段,利用DefinePlugin将字段打包进前端构建项目中

    1
    2
    3
    4
    5
    6
    7
    const PACKAGE = require('../package.json');

    ...
    new webpack.DefinePlugin({
    'CHAIN_CONFIG': JSON.stringify(PACKAGE.chainConfig)
    }),
    ...
  3. 前端项目源码中使用变量形式来操作,同时TS项目下为了类型安全,增加类型定义

    1
    2
    3
    4
    5
    ...
    console.log(CHAIN_CONFIG.sdkVersion)
    ...


    1
    2
    3
    4
    5
    6
    7
    8
    9
    // typing.d.ts
    /**
    * @description 具体配置值见Package.json
    */
    declare const CHAIN_CONFIG: {
    sdkVersion: string;
    subscribeMinSdkVersion: string;
    };

如上即实现常量配置,但还是有坑,继续看。

webpack.DefinePlugin

Uncaught SyntaxError: Missing } in template expression

针对DefinePlugin中进行变量定义,一开始我的写法如下,但启动执行后即报错。

1
2
3
4
5
...
new webpack.DefinePlugin({
'CHAIN_CONFIG': PACKAGE.chainConfig
}),
...

查看文档,发现变量值的解析,规则如下

Each key passed into DefinePlugin is an identifier or multiple identifiers joined with ..

  • If the value is a string it will be used as a code fragment.
  • If the value isn’t a string, it will be stringified (including functions).
  • If the value is an object all keys are defined the same way.
  • If you prefix typeof to the key, it’s only defined for typeof calls.

因此,对于如上我的配置,值是对象,对象的属性值是字符串,遍历执行后,字符串值都会作为代码块存在,所以语法即报错。

所以这里需要增加JSON.stringify进行序列化,最终使用时就可以当对象来用。

写在最后

done