Vorrei installare un applicazione utilizzandoCome configurare un'app utilizzando browserify, babel, eslint, react/jsx e jest (senza gulp/grunt)?
Npm come task manager (non gulp | grunt | brocoli)
Prima di tutto è necessario installare tutte quelle librerie con npm.
npm install --save-dev eslint, browserify, babelify, jest-cli
I nomi dei pacchetti spiegano cosa è installato su lib.
Browserify:
Supponendo che app/index.js è il file di root. È possibile aggiungere i seguenti script per creare e guardare il file sorgente.
"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 e JSX
Per compilare ES6 e JSX, aggiungere il seguente al package.json:
"browserify": {
"transform": [
"babelify"
]
}
Ora, browserify trasforma la sintassi ES6 e JSX di pianura Javascript 5. Per più trasformazioni controlla questo https://github.com/substack/node-browserify/wiki/list-of-transforms.
JEST
Per utilizzare Jest aggiungere quanto segue al package.json.
"scripts": {
"test": ""
}
Successivamente, è possibile eseguire i test utilizzando npm test. Jest documentation
ESLINT
Se è la prima volta con ESLint, è necessario impostare un file di configurazione utilizzando eslint --init e quindi è necessario aggiungere un nuovo script per package.json.
Ad esempio:
"lint" : "eslint app/*.js"
nota, è necessario specificare tutti i file di origine che si desidera essere pelucchi nel comando precedente.
Grazie questa risposta ha molti dettagli. Abbastanza per farmi coprire. Quello che potrebbe risolvere la domanda sarebbe un esempio di es6 reagire ciao world js-code e html. – Spectator
https://github.com/giuse88/react-template –
E qual è la tua domanda specifica? Basta installare quei moduli e usarli. Non c'è davvero nulla da configurare. È possibile aggiungere uno script nel pacchetto package.json con i comandi eseguiti frequentemente, ma questo è tutto. Puoi saperne di più sugli script qui: https://docs.npmjs.com/misc/scripts –
L'hai fatto con questo particolare techstack? È un po 'complicato dal momento che devi usare i plugin appropriati per lavorare con ESLint e Jest.Questo articolo è stato utile ma è ancora necessario capire la parte jest https://medium.com/javascript-scene/how-to-use-es6-for-isomorphic-javascript-apps-2a9c3abe5ea2 – cuadraman
Quasi tutto è configurato tramite pacchetto .json (o file di configurazione specifici del modulo). Per jest + babel, dai uno sguardo a https://github.com/babel/babel-jest –