I'm using react js and I installed babel 7 in my pc.
when I open react js app with command
npx create-react-app project_name
and then i make
yarn eject
I get package.json (part of it)
"dependencies": {
"#babel/core": "7.1.0",
"#svgr/webpack": "2.4.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "9.0.0",
"babel-jest": "23.6.0",
"babel-loader": "8.0.4",
"babel-plugin-named-asset-import": "^0.2.3",
"babel-preset-react-app": "^6.1.0",
"bfj": "6.1.1",
but I get some issues with babel 7 so i want to downgrade to last babel ^6.23.0".
I installed it globally and when I run on cmd
babel --version
I get
6.23.0 (babel-core 6.26.3)
but when I try to create new project again with
create-react-app
I get the same babel core 7.0 but I don't want it.
I want this babel (like my other projects)
"autoprefixer": "7.1.6",
"babel": "^6.23.0",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-preset-react-app": "^3.1.2",
"babel-runtime": "6.26.0",
"base64-img": "^1.0.4",
The newest version of create-react-app, version 2, uses babel 7. You can opt to use the older version of create-react-app like this:
npx create-react-app#1 project_name
Related
Please tell me if I correctly determined that these packages should be in dependencies? how to learn to fix the difference for installing a package between dependencies or devDependencies. If I accidentally include all packages in dependencies by mistake, will my build size increase? Can the compiler remove unnecessary packages?
"dependencies": {
"#types/jest": "^29.4.0",
"#types/node": "^18.11.18",
"#types/react": "^18.0.27",
"#types/react-dom": "^18.0.10",
"babel-preset-es2015": "^6.24.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typescript": "^4.9.5"
},
Couldn't find preset "#babel/preset-env"
I have library imports here that include babel-preset-es2015 inside a project that is working. I then attempt to add the same dependencies to package.json, yarn install without errors, and then try to run webpack.
"webpack": "^2.0.0",
"babel-core": "^6.5.2",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.14.0",
"babel-plugin-styled-components": "^1.10.0",
"html-webpack-plugin": "^2.16.1"
However, it wants #babel/preset-env. Aren't these the presets for babel 7?
I get this error for every Jest test suite I run:
Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of #babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "#babel/core" or "babel-core" to see what is calling Babel.
But what is strange, this error appears only if I try to install packages via npm install. So what is the problem? What I do wrong?
P.S. I don't want to use yarn install.
Here is my paskage.jsons babel, jest and enzyme related parts:
{
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.3.4",
"#babel/plugin-proposal-class-properties": "^7.2.3",
"#babel/plugin-proposal-decorators": "^7.2.3",
"#babel/plugin-proposal-export-default-from": "^7.2.0",
"#babel/plugin-proposal-export-namespace-from": "^7.2.0",
"#babel/plugin-proposal-object-rest-spread": "^7.2.0",
"#babel/plugin-transform-object-assign": "^7.2.0",
"#babel/plugin-transform-runtime": "^7.2.0",
"#babel/preset-flow": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"babel-loader": "8.0.4",
"babel-plugin-react-docgen": "^2.0.0",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1",
"jest": "^23.6.0",
"jest-enzyme": "^7.0.1",
"jest-pnp-resolver": "1.0.1",
"jest-resolve": "23.6.0",
},
}
Jest 23 does not support #babel/core 7. Either upgrade to Jest 24 which supports babel 7 or run
npm install --save-dev babel-core#7.0.0-bridge.0
to load a compatible version of babel for jest 23
Hy guys. So, until now I have been doing it like this. Using webpack to make a bundle file, pushing code to github and deploying to Heroku. For this to work I had to push the bundle file to github.
Now, I would like to run webpack on Heroku. The thing is I have dependencies and devDependencies inside my package.json and if I want to run webpack on Heroku I need to install both. To do this I have to move a lot of devDependencies to dependencie so Heroku can install it and run webpack.
What is the best way to do this?
1) If I move all devDepend to dependencies and let Heroku make build file can I somehow clean and remove all unnecessary devDependencies afterwards?
2) Is there a way to do it without changing my package.json or setting set NPM_CONFIG_PRODUCTION=false and disabling production environment?
3) How would npm script look like to do this?
4) All in all what would be a best performance optimized way to push to Heroku ?
This is my package.json file
"scripts": {
"clean-client": "rm -rf ./src/dist",
"clean-server": "rm -rf ./src/build",
"build-server": "babel src/server -d src/build -s --copy-files",
"build-client": "webpack -p --config webpack.config.prod.babel.js",
"start": "set \"NODE_ENV=production\" && npm run build-server && npm run build-client && node ./src/build/index.js",
"start-dev": "set \"NODE_ENV=development\" && nodemon ./start-dev.js",
"webpack": "webpack -w --config webpack.config.babel.js",
"flow": "./node_modules/.bin/flow check",
"test": "set \"NODE_ENV=test\" && babel-tape-runner -r \"test/setup.js\" \"test/**/*.test.jsx\" | node_modules/.bin/tap-spec",
"coverage": "babel-node node_modules/babel-istanbul/lib/cli.js cover node_modules/babel-tape-runner/bin/babel-tape-runner -- \"test/setup.js\" -- \"test/**/*.test.jsx\""
},
"dependencies": {
"babel-plugin-react-css-modules": "2.7.0",
"babel-runtime": "^6.23.0",
"ejs": "^2.5.6",
"express": "^4.15.2",
"prop-types": "^15.5.8",
"react": "15.5.4",
"react-dom": "15.5.4",
"react-router": "3.0.4"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-eslint": "^7.2.3",
"babel-istanbul": "^0.12.2",
"babel-loader": "^7.0.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-webpack-alias": "^2.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.24.1",
"babel-tape-runner": "^2.0.1",
"bootstrap": "v4.0.0-alpha.6",
"browser-sync": "^2.18.8",
"browser-sync-webpack-plugin": "^1.1.4",
"css-loader": "0.28.0",
"enzyme": "^2.8.2",
"eslint": "^3.18.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-flowtype": "^2.32.1",
"eslint-plugin-react": "^6.10.3",
"extract-text-webpack-plugin": "^2.1.0",
"flow-bin": "^0.45.0",
"ignore-styles": "^5.0.1",
"jquery": "^3.2.1",
"jsdom": "^10.1.0",
"jsdom-global": "^3.0.2",
"node-sass": "^4.5.2",
"nodemon": "^1.11.0",
"postcss": "^6.0.1",
"postcss-cssnext": "2.10.0",
"postcss-loader": "^2.0.5",
"postcss-scss": "^1.0.0",
"react-test-renderer": "^15.5.4",
"sass-loader": "^6.0.3",
"sass-resources-loader": "^1.2.1",
"script-loader": "^0.7.0",
"sinon": "^2.2.0",
"sinon-test": "^1.0.2",
"snazzy": "^7.0.0",
"standard": "^10.0.2",
"style-loader": "^0.17.0",
"tap-spec": "^4.1.1",
"tape": "^4.6.3",
"tether": "^1.4.0",
"webpack": "^2.4.1"
Per this guide you must set NPM_CONFIG_PRODUCTION to "false" and NODE_ENV to "development" in order for the devDependencies to be installed using npm install. If you are not using Heroku's Review Apps as the guide is, I believe you can set these environment variables via your apps dashboard.
Disclosure: I wrote the guide.
The question is a bit old but hope my notice could help someone. This is an alternative to the previous suggested solution (didn't try).
To build your project directly on heroku, just add the build script to your package.json file.
"scripts": {
"build": "webpack --config webpack.config.js",
},
I have a lot of devDevependecies including webpack-cli which i don't install globally. Before adding the script i have to build the project and push, after adding I noticed heroku just run it automatically and the output of the process was the same as on local machine. The key here is probably the build keyword !!!
The template being considered is https://github.com/StephenGrider/ReduxSimpleStarter
After git clone, the folder is merely 160kb.
But after npm install, the folder is 620MB.
Is there a way to make it as small as possible? It was suspected that the react native stuff (including the binaries?) is really huge, so can something be done such as npm install --minus react-native if react native is not needed at all?
P.S. a few days have passed, and today Apr 2, 2017, the same repo, the same as before, after npm install, is only 138MB. I guess somebody fixed the dependencies (of the npm modules registry), so that some 500MB of stuff is not installed.
There is no react-native in the starter project that you referenced. :)
So, that is not what is causing the large directory.
It is typical to have a large node_modules directory. This directory is usually placed in the .gitignore (or similar) so that it is not committed to the source control repository.
In order to track dependencies, use the --save and --save-dev switches in npm install and make sure to commit your package.json
Also, when you npm install for production, use the npm install --production switch to exclude dev dependencies.
When you run npm install all dependencies will be installed as from package.json,
this includes devDependencies and dependencies (using npm you can also control what to install or not as Davin Tryon pointed out). Below an extract from your package.json you can see all dep included. Also you could consider ignoring node_modules on git or svn to do use space on your repository.
You could consider manually remove the node_modules directory if you do not work on a project so you can save some space on you HD.
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"babel-preset-stage-1": "^6.1.18",
"lodash": "^3.10.1",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "^4.0.0",
"react-router": "^2.0.1",
"redux": "^3.0.4"
}