javascript - react 字符串常量

Question

我想将应用程序中的所有字符串抽象到一个集中文件中。我可以执行以下操作:

字符串.js:

export const MY_STRING = "foobar";

组件.js:

import React, { Component } from "react";
import { MY_STRING } from "strings";

class MyComponent extends Component {
    render() {
        return <div>{MY_STRING}</div>
    }
}

但是对于大量的插值，这似乎在运行时会变慢。有没有办法在构建时通过 webpack 添加这些字符串以避免插值？

Answer 1

使用 Webpack Define插件:

new webpack.DefinePlugin({
  SOME_VARIABLE: "Hello World",
});

不过老实说，只拥有 strings.js 文件并没有什么坏处，它会让您的应用程序更容易推理。此外，一旦您开始获得更复杂的字符串或进行字符串模板化，则必须在运行时完成，因此无论如何您最终都会得到一个 strings.js。让您的字符串在 Webpack 配置和 strings.js 之间拆分不会很有趣。