2015-05-31 25 views
7

chciałbym skonfigurować aplikację używającJak skonfigurować aplikację za pomocą przeglądarki internetowej, babel, eslint, react/jsx i jest (no gulp/grunt)?

  1. Browserify
  2. BabelJS
  3. ESLint
  4. React (z JSX)
  5. żartem

NPM jako menedżera zadań (bez haustem | grunt | brocoli)

+0

Jakie jest Twoje konkretne pytanie? Po prostu zainstaluj te moduły i użyj ich. Naprawdę nie ma nic do skonfigurowania. Możesz dodać skrypt do pliku package.json za pomocą często uruchamianych poleceń, ale o to chodzi. Możesz dowiedzieć się więcej o skryptach tutaj: https://docs.npmjs.com/misc/scripts –

+0

Zrobiłeś to z tym konkretnym komputerem? Jest to trochę trudne, ponieważ musisz używać odpowiednich wtyczek do pracy z ESLint i Jest.Ten artykuł był przydatny, ale nadal trzeba się dowiedzieć, jaka część jest https://medium.com/javascript-scene/how-to-use-es6-for-isomorphic-javascript-apps-2a9c3abe5ea2 – cuadraman

+0

Prawie wszystko jest skonfigurowane za pomocą pakietu .json (lub specyficzne dla modułu pliki konfiguracyjne). Dla jest + babel, spójrz na https://github.com/babel/babel-jest –

Odpowiedz

13

Przede wszystkim musisz zainstalować wszystkie te biblioteki z npm.

npm install --save-dev eslint, browserify, babelify, jest-cli 

Nazwy pakietów same wyjaśniają, jaka biblioteka jest zainstalowana.

Browserify:

Zakładając, że jest to plik app/index.js korzeń. Możesz dodać następujące skrypty do zbudowania i obejrzenia pliku źródłowego.

"scripts": { 
    "build": "browserify app/index.js > public/js/bundle.js", 
    "install": "npm run build", 
    "watch": "watchify app/index.js -o public/js/bundle.js" 
    } 

ES6 i JSX

Aby skompilować ES6 i JSX, dodać następujące package.json:

"browserify": { 
    "transform": [ 
     "babelify" 
    ] 
    } 

Teraz browserify przekształca składni ES6 i JSX do zwykłego JavaScript 5. W przypadku więcej transformacji sprawdź to https://github.com/substack/node-browserify/wiki/list-of-transforms.

JEST

Aby korzystać żartem dodać następujące package.json.

"scripts": { 
    "test": "" 
} 

Po tym można uruchomić testy przy użyciu npm test. Jest documentation

ESLINT

Jeśli jest to twój pierwszy raz przy użyciu ESLint, należy skonfigurować plik konfiguracyjny za pomocą eslint --init a następnie trzeba dodać nowy skrypt package.json.

Na przykład:

"lint" : "eslint app/*.js" 

Uwaga, trzeba określić wszystkie pliki źródłowe, które mają być szarpie w powyższym poleceniu.

+0

Dzięki tej odpowiedzi ma wiele szczegółów. Wystarczająco, żeby mnie okryć. To, co mogłoby rozwiązać to pytanie, byłoby przykładem es6 reagowania na światowy kod js i html. – Spectator

+0

https://github.com/giuse88/react-template –