I'm using a Rails 4.0 project that implements Browserify-Rails to implement Babelify.
Everything seems to be going hunky dory on my local, and remote Beta server. But when I deploy to production, certain files will be skipped if they have in them, a require("")
.
My original settings were this :
config.browserify_rails.commandline_options = ["-t [ babelify --presets [ es2015 react stage-0 ] --plugins [ syntax-async-functions transform-regenerator ] ]"]
Which made it skip over a file that had this line in it :
var { configureStore } = require('./configureStore');
That require lead here :
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 };
I was guessing maybe there's a couple JS stylings I'm using here that are above ES2015
So I went ahead and played with the configs, adding Incremental, and updating to ES2017. Which got me past that broken file. My new config looked like this :
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\""]
But this gets me as far as this line in a further file :
let { search } = require('../../actions/search');
Which loads this ( and mind you, the follow file was parsed and translated just fine ) :
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
});
I'm curious if there's any Babelify plugins/presets that I might be missing in order to make this work.
The yearly presets only contain the features that were added that year - i.e. es2017
doesn't include any of the stuff from the es2015
and es2016
presets!
This set of presets ought to solve your problem:
es2015 es2016 es2017 react stage-0
That said, the preferred way to include all the latest yearly presets is to use the env
preset, which pulls in all of them, will update once ES2018 is released, and also allows you to configure things based on your target environment if you want:
env react stage-0