1

J'utilise un projet Rails 4.0 qui implémente Browserify-Rails pour implémenter Babelify.Quels presets/plugins Babelify manque-t-il pour analyser ce code?

Tout semble aller bon train sur mon serveur bêta local et distant. Mais quand je déploie en production, certains fichiers seront ignorés s'ils ont dedans, un require("").

Mes paramètres originaux étaient ceci:

config.browserify_rails.commandline_options = ["-t [ babelify --presets [ es2015 react stage-0 ] --plugins [ syntax-async-functions transform-regenerator ] ]"] 

Ce qui fait sauter sur un fichier qui avait cette ligne en elle:

var { configureStore } = require('./configureStore'); 

qui nécessitent conduit ici:

let { createStore, combineReducers, applyMiddleware, compose } = require('redux'); 
let thunk = require('redux-thunk').default 
let session = require('./reducers/session').default; 
let search = require('./reducers/search').default; 

const configureStore =() => { 
    const reducers = combineReducers({ 
    session, 
    search, 
    }); 

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 

    return createStore(
    reducers, 
    composeEnhancers(applyMiddleware(thunk)) 
); 
} 

export { configureStore }; 

Je devinais peut-être il y a quelques styles JS que j'utilise ici qui sont au-dessus ES2015

Alors je suis allé de l'avant et joué avec les configs, en ajoutant Incremental, et en mettant à jour vers ES2017. Ce qui m'a fait passer ce fichier cassé. Ma nouvelle configuration ressemblait à ceci:

config.browserify_rails.use_browserifyinc = true 
config.browserify_rails.commandline_options = ["-t [ babelify --presets [ es2017 react stage-0 ] --plugins [ syntax-async-functions transform-regenerator ] ]", "-t coffeeify --extension=\".js.coffee\""] 

Mais cela me fait aussi loin que cette ligne dans un autre fichier:

let { search } = require('../../actions/search'); 

qui charge ce (et de l'esprit que vous, le fichier de suivi a été analysé et traduit très bien):

export const SEARCH_RESULTS_RECEIVED = 'SEARCH_RESULTS_RECEIVED'; 

export const search = (term, token) => { 
    return (dispatch) => { 
    if (term && term.trim() !== '') { 
     return _search(term, token).then((results) => dispatch(resultsReceived(results))); 
    } else { 
     return dispatch(resultsReceived([])); 
    } 
    } 
}; 

const _search = (term, token) => { 
    let promise = new Promise((resolve, reject) => { 
    fetch(encodeURI(`/api/search?search=${term}`), { 
     headers: { 
     "Content-Type": "application/json", 
     "Authorization": `Token ${token}` 
     } 
    }) 
    .then(response => response.json()) 
    .then(function(response) { 
     return resolve(response.results); 
    }) 
    .catch((error) => { 
     return reject(error); 
    }); 
    }); 

    return promise; 
}; 

export const resultsReceived = (searchResults) => ({ 
    type: SEARCH_RESULTS_RECEIVED, 
    searchResults 
}); 

Je suis curieux de savoir s'il y a des plugins Babelify/presets que je pourrais être absent pour faire ce travail.

Répondre

2

Les préréglages annuels contiennent uniquement les fonctionnalités qui ont été ajoutées cette année, c'est-à-dire que es2017 n'inclut aucun élément des préréglages es2015 et es2016!

Cet ensemble de paramètres prédéfinis devrait résoudre votre problème:

es2015 es2016 es2017 react stage-0 

Cela dit, la meilleure façon d'inclure toutes les dernières présélections annuelles est d'utiliser le env preset, qui tire dans tous, mettra à jour une fois ES2018 est libéré, et vous permet également de configurer les choses en fonction de votre environnement cible si vous le souhaitez:

env react stage-0 
+0

Yo !!! Merci beaucoup Joe! Honnêtement, je ne pouvais pas trouver cette réponse nulle part. Je vous remercie! – Trip

+0

@Trip: Heureux que je pourrais aider, je pense que beaucoup de gens deviennent confus par cela! Pour référence future, tous les presets officiels sont documentés [ici] (http://babeljs.io/docs/plugins/). –