score:11
here's an alternative approach to sharing/alternating configurations based upon the current node_env
:
package.json
"scripts": {
"build": "node_env=production next build",
"dev": "node_env=development next dev",
"test" : "node_env=test jest"
...etc
}
babel.config.js (must be a .js
file)
const { node_env } = process.env;
const inproduction = node_env === "production";
const indevelopment = node_env === "development";
module.exports = api => {
/*
alternatively, you can utilize api.env() to get the current node_env:
const inproduction = api.env("production");
const indevelopment = api.env("development");
if using api.env(), then these must be defined before invoking the cache
*/
api.cache.using(() => process.env.node_env);
return {
presets: ["next/babel"],
plugins: [
[
"styled-components",
{
ssr: true,
displayname: indevelopment,
preprocess: inproduction,
},
],
["import", { libraryname: "antd", librarydirectory: "lib" }],
inproduction && "react-remove-properties",
].filter(boolean), // this will filter any falsy plugins (such as removing react-remove-properties when not in production)
};
};
score:77
set up different environments in your .babelrc
{
"env": {
"dev": {
"presets": ["es2015"],
"plugins":["x"]
},
"test": {
"presets": ["es2015"]
}
}
}
and then run babel
after you have set your babel_env
babel_env=test <commandhere>
or babel_env=dev <commandhere>
if you don't set babel_env
, babel will use the node_env
value.
if you don't set either babel_env
nor node_env
, it will use 'development'.
code below:
function getenv(defaultvalue = "development") {
return process.env.babel_env || process.env.node_env || defaultvalue;
}
Source: stackoverflow.com
Related Query
- How do you configure babel to run with different configurations in different environments
- React: How to run "react-scripts start" with a different root?
- How to configure Why Did You Render with NextJS 12
- How to run the server simultaneously with the client in a nodeJS application using concurently when the files are in different folders
- How do you use React lazy to code split with Babel & Webpack?
- How to run two js apps on different url with Nginx?
- react-router go back a page how do you configure history?
- How to configure package.json to run eslint script
- How to set up Babel 6 stage 0 with React and Webpack
- How do you run mocha tests in the browser?
- How do you add/remove to a redux store generated with normalizr?
- How to use different .env files with nextjs?
- How to configure webpack dev server with react router dom v4?
- How to configure redux-persist with redux-toolkit?
- How do you send images to node js with Axios?
- How do you manage asynchronous Store operations with Flux?
- JS Unit testing run multiple times with different parameters
- How to configure service workers with create-react-app
- How do you make a library truly tree-shakable with webpack?
- How can you set path of match with MemoryRouter and Jest? (not location or history)
- How to run Jest tests with coverage for one file
- How to run production react app in local with local back-end
- How do you test router match params with jest and enzyme?
- How do you mock a react component with Jest that has props?
- How to run a mutation on mount with React Apollo 2.1's Mutation component?
- How do you deal with public and private routes in a NextJS app?
- How to configure Nginx with React Router HistoryLocation?
- How to load es6, react, babel code in html with cdn?
- How do you reload an iframe with ReactJS?
- How do you update Formik initial values with the react context api values after an AJAX request?
More Query from same tag
- setState of multiple objects - React JS
- How can I pass useState value from one component to another component
- How can I bind data from the API in react?
- Can an action that updates the store be dispatched on componentDidUpdate()?
- Using AND operator inside JSX block of code
- Next.js searches images in local directory not on AWS
- Why my react-bootstrap Accordion is not working on small devices?
- Is React HOC a pure function?
- How to set properties to a object within a react hook?
- How to create a first visit popup in react-bootstrap application
- Need help setting up a conditional in JSX
- React-Spring: Invalid Hooks Call
- Javascript Parser Error While Trying To Include SVG Element as Functional React Component
- Confirmation modal connecting to redux store using mapStateToProps gives an ERROR
- Creating a react function for a newbie
- How to make a horizontal view without using grid and flex
- JavaScript Iterate over Object
- typing in a for loop react+typescript?
- Changing Class Based on Object Properties in React
- CORS issue with Restify
- How to keep updated react context value inside a callback in a custom hook
- How to conditionally render a component that uses hooks, i get error that component that uses hooks cannot do conditionallly render
- On handleChange, setState and the map array with new items depending on the setedState
- Load more data from API when user scrolls the the page. REACT
- Fetch data into React component and render it
- Reset initial state in React + ES6
- Can I use a switch statement to manage my forms in React?
- Options how to give feedback to user of SPA website after AJAX calls
- ReactJS .... map() is not a function
- What is the correct way to write state-dependent inline CSS 'style'?