Пользовательский плагин / преобразователь Babel в приложении React - PullRequest
Новая
       19

Пользовательский плагин / преобразователь Babel в приложении React

0 голосов
/ 17 июня 2020

Я разрабатываю приложение React с помощью Babel и Webpack, и я хотел бы иметь преобразователь временного кода сборки.

Допустим, пример. У меня есть функция переключения, которая имеет 3 случая, такие как CASE_1, CASE_2 и DEFAULT.

каждый случай будет иметь значения числа, объекта и методов.

1. Подход к назначению значений 

const baseCurrency = myAppSwitch({
  // object approach.
  CASE_1: { BASE_CURRENCY: 'EUR', },
  CASE_2: { BASE_CURRENCY: 'AUD', },
  DEFAULT: { BASE_CURRENCY: 'USD' },
});

Вышеупомянутая функция с различными сборками. если мы запустим, npm запустить сборку: case1 const baseCurrency = {BASE_CURRENCY: 'EUR',};

если мы запустим, npm запустить сборку: case2 const baseCurrency = {BASE_CURRENCY: 'AUD', };

если мы запускаем, npm запускаем build const baseCurrency = {BASE_CURRENCY: 'USD',};

2. Асинхронный c / нормальный Функциональный подход 

const baseCurrency = myAppSwitch({
  CASE_1: () => {
     const response = await call_case1_api();
     return response.baseCurrency;
  },
  CASE_2: () => {
     const response = await call_case2_api();
     return response.baseCurrency;
  },
  DEFAULT: { BASE_CURRENCY: 'USD' },
});

Вышеупомянутая функция с различными сборками. если мы запустим, npm run build: case1 

const baseCurrency = async () => {
     const response = await call_case1_api();
     return response.baseCurrency;
  }();

Вышеупомянутая функция с различными сборками. если мы запустим, npm запустить сборку: case2 

const baseCurrency = async () => {
     const response = await call_case2_api();
     return response.baseCurrency;
  }();

Вышеупомянутая функция с различными сборками. если мы запустим, npm run build 

const baseCurrency = async () => {
     const response = await call_case2_api();
     return response.baseCurrency;
  }();

Ниже код трансформатора babel не работает для выбора параметра функции.

is ES7 Decorator может использоваться, не уверен. 

const babel = require('@babel/core');

const code = `
  const name = countrySwitch({
    CN: 'China',
    DEFAULT: 'Singapore',
  });
`;

// babel.transformAsync(code, options)
const output = babel.transform(code, {
  plugins: [
    // your first babel plugin.
    function myCustomPlugin() {
      return {
        visitor: {
          CallExpression(path) {
            console.log('path.node.callee.property.name: ', path.node)
          },
          // Identifier(path) {
          //   console.log('path: ', path.node.right);
          // },
        },
      };
    },
  ],
});
...