(Код рефакторинга) команда оболочки с использованием child_process в javascript - PullRequest
Новая
       20

(Код рефакторинга) команда оболочки с использованием child_process в javascript

0 голосов
/ 04 мая 2019

Я работаю над проектом nuxt.js / vue.js и применяю методологию атомарного проектирования, это означает, что компоненты будут разделены на сотни компонентов в каждой папке 

/components
   /atoms
   /molecules
   /organisms

Я хочуи нужно импортировать сгруппированным и умным способом, поэтому я делаю:

в webpack.config.js или nuxt.config.js

, используя крючки компилятора из веб-пакета для каждой сборки,генерирование index.js экспортирующих компонентов 

const exec = require('child_process').exec;

module.exports = {

  // ... other config here ...

  plugins: [

    // ... other plugins here ...

    {
        apply: compiler => {
          compiler.hooks.beforeCompile.tap('MyPlugin', compilation => {
            exec('sh assets/DynamicExport.sh', (err, stdout, stderr) => {
              if (stdout) process.stdout.write(stdout)
              if (stderr) process.stderr.write(stderr)
            })
          })
        }
      }
  ]
};

в assets/DynamicExport.sh

ls components/atoms/ | grep -v index.js | sed 's#^\([^.]*\).*$#export {default as \1} from "./&"#' > components/atoms/index.js

ls components/molecules/ | grep -v index.js | sed 's#^\([^.]*\).*$#export {default as \1} from "./&"#' > components/molecules/index.js

ls components/organisms/ | grep -v index.js | sed 's#^\([^.]*\).*$#export {default as \1} from "./&"#' > components/organisms/index.js

, затем в каждой папке создается файл index.js путем экспорта всех компонентов папки 

export { default as ButtonStyled } from './ButtonStyled.vue'
export { default as TextLead } from './TextLead.vue'
export { default as InputSearch } from './InputSearch.vue'
....

Наконец, я могу импортировать понятным, сгруппированным и умным способом в любое место моего приложения. 

import {
    ButtonStyled,
    TextLead,
    InputSearch
} from '@/components/atoms'

import {
    SearchForm
} from '@/components/molecules'

все работает нормально, однако я нахожу решение немного большим, вызываяфайл в assets, может быть, есть другой способ, который я не знаю ..

Есть ли способ реорганизовать и снизить содержание assets/DynamicExport.sh что-то менее повторяющееся?

Любой кодРефакторинг будет приветствоваться.

Заранее спасибо.

1 Ответ

3 голосов
/ 04 мая 2019

Это просто файл оболочки, так что вы можете сделать что-то вроде этого: 

parameters=( atoms molecules organisms )
for item in ${parameters[*]}
do
  ls components/$item/ | grep -v index.js | sed 's#^\([^.]*\).*$#export {default as \1} from "./&"#' > components/$item/index.js
done

И если вы хотели быть по-настоящему хитрым и знали, что каждый подкаталог в каталоге компонентов необходимо итерировать, то вы даже можете заменить первую строку на: 

parameters=$(ls components)

РЕДАКТИРОВАТЬ парсинг ls не является безопасным. Вот лучший подход: 

for item in components/*; 
do
  # do something with item
done
...