ru_vds Dec 9 2016 at 15:06

Минимальное окружение для JS-разработки: ava, standard, chokidar-cli и precommit-hook

4 min

18K

RUVDS.com corporate blogJavaScript*Node.JS*

Translation

+27

Comments 10

MrCheater Dec 9 2016 at 15:24

У меня насчёт AVA вопрос:

Предположим, что у меня есть такой код:

import React from 'react';
import styles from './ExampleComponent.css';
import DemoIMG from '../assets/logo.png';
import DemoSVG from '../assets/dummy.svg';

export class ExampleComponent extends React.Component {
    render () {
        return (
            <div className = {styles['root']}>
                <img src = {process.env.CDN_ROOT_URL + '/image.jpg'}
                <img src = {DemoIMG}/>
                <DemoSVG width = {300} height = {300} className = {styles['normal']} />
            </div>
        );
    }
}

Этот код работает только благодаря loader-ам Webpack-а. Чем AVA лучше Mocha, если без компиляции кода теста, тест всё равно не завести?

Semigradsky Dec 9 2016 at 17:52

AVA внутри использует Babel. Просто дбавьте в конфиг плагины/пресеты, которые вам нужны.

В данном случае вам нужен пресет react.

MrCheater Dec 9 2016 at 17:58

Не-не-не. Babel тут не причем. Babel не умеет CSS-Modules, SVG и прочие клевые штуки. Это задача webpack-loaders и webpack-plugins.

dex157 Dec 9 2016 at 23:44

Если перед тестами каждый раз собирать проект с webpack, то достаточно много времени уходит на запуск тестов, в нашем проекте мы используем такие хаки

styleHook({
  extensions: [ '.css', '.scss' ],
  preprocessCss: data => sass.renderSync({ data, includePaths: ['./src/theme/'] }).css
});

require.extensions['.png'] = () => ({});
require.extensions['.svg'] = () => ({});

в таком случае mocha/wallaby.js могут собирать проект и не ругаться на файлы ассетов

impwx Dec 9 2016 at 15:26

if (typeof number !== 'number') throw new TypeError('Only numbers can be multiplied!')

Вместо того, чтобы обмазывать такими проверками весь код, а потом еще писать тесты на эти проверки, лучше сразу использовать Typescript.

rmnuts Dec 9 2016 at 20:22

Пробовали husky для Git-хуков?

Apathetic Dec 9 2016 at 22:13

standard?
Спасибо, нет. В нем противно решительно всё, начиная от двух пробелов для интендации и запрета на точку с запятой (Крокфорд, где ты, когда ты так нужен?) и заканчивая довольно-таки наглым самоименованием. Стандарт? Ха, нет.

DAiMor Dec 10 2016 at 14:01

Ну и в дополнение Standard не статический анализатор кода, как пишет автор, это просто style guide, да и только.

YU76 Dec 17 2016 at 16:02

Ну вот я не могу въехать во все это сразу, т.к. работаю на C# и считаю, что нужно расширять стек используемых технологий. Но на строке с командой npm напрочь перестаю понимать, что происходит.
Думаю, всем присутствующим это не составляет проблем, и понимаю почему. А с другой стороны — поставьте себя на мое место.
Прикладная разработка внутри компании, TFS, C#, WCF, WPF и несколько разработчиков.
Ну телепатом надо стать, чтобы понять, куда копать.
Может Вы вкратце укажете, куда смотреть, чтобы понять смысл команд и используемых инструментов? Буду очень признателен.
И не я один такой.
Гуглил уже до потери сознания, но все воедино не могу сложить никак…

spmbt Apr 10 2017 at 14:28

Смотреть на npmjs.org. Там всё очень просто: какой пакет запускаете, такие задачи выполняются. Конкретно — те JS-скрипты, которые будут установлены по npm install… в папке /node_modules. Можно просто поверить описанию, а можно протрассировать, расставив в скриптах debugger; или console.log и увидеть, как исполняется.