Реактивные строковые константы

Question

Я хочу абстрагировать все строки в моем приложении в централизованный файл. Я мог бы сделать следующее:

strings.js:

export const MY_STRING = "foobar";

component.js:

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

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

Но похоже, что это может стать медленным во время выполнения для большого количества интерполяций. Есть ли способ добавить эти строки во время сборки через веб-пакет, чтобы избежать интерполяции?

Answer 1

Используйте плагин Webpack Define :

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

Честно говоря, наличие файла strings.js не повредит, и это сделает ваше приложение бесконечно легче рассуждать. Кроме того, как только вы начнете получать более сложные строки или выполнять шаблонизацию строк, это должно быть сделано во время выполнения, и вы в любом случае получите strings.js. Не было бы забавно разделить ваши строки между конфигурацией Webpack и strings.js.