I was playing with create-react-app and found out that it does put all packages under normal "dependencies". I built the app and found out the 'build' folder size was 2.66 MB.
Then I manually moved the packages not needed in production to "devDependencies" and built again, but the 'build' folder size was still 2.66 MB.
Is there some logic in the webpack.prod.js file, that knows what is needed even if all the packages are listed under "dependencies"?
If so, is there still some benefits using "devDependencies" in package.json?
When webpack builds your project it determines everything your project depends on, starting at the entry file, and then combines, uglifies and so on, and disregards everything else.
For example, if index.js is your entry file and it depends on moment.js, moment.js will be included in your build regardless if it's a dependency or devDependency.
The reason for this is npm distinguishes between dependencies and devDependencies, while webpack only distinguishes between that which is needed and that which is not.
If so, is there still some benefits using "devDependencies" in package.json?
I still use devDependencies, but solely as a means of ordering my package.json, but everything can safely be in dependencies when a tool such as webpack is used to build the production site/app
Related
Can all dependencies of a React-based website be declared as devDependencies instead of (production) dependencies?
Since the build folder is not versioned together with the code, each checkout of the repository will require a build operation to run the website. Thus every checkout can be considered a development environment.
dependencies is an object of dependencies that the app itself use, E.G react, react-dom.
On the other hand, devDependencies are dependencies that are only used when you're developing or building the package, E.G. webpack, babel, prettier.
Whether you need npm install in production or not, filling these fields appropriately will (at least) provide clarity for the readers.
Now answering your question, module bundlers and transpilers don't care whether the dependency is in devDependencies or dependencies or is it there in the first place. All it cares about that it exists in the node_modules folder.
I started to use React Native recently and, following the oficial docs, I initialized a project using npx react-native init ProjectName.
I'm not sure if the tools versions matters (probably yes), but i'm using npm version 6.13.7, react-native-cli version 2.0.1 and react-native 0.62.2. With that config, the file architecture i that get is the following:
I seached about it, but i not found an answer. So, can someone please explain to me what is the purpose of each file in this file architecture and which of these files can i remove?
Thank you in advance :D
Package.json
This file holds all of the dependencies of modules that your app is using and needed to install for running your app.
yarn.lock files yarn and package-lock.json
These two files hold the version of your dependencies yarn.lock package-lock.json is automatically generated for any operations where npm or yarn modifies either the node_modules tree or package.json. It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.
app.json
This file holds your application name etc.
babel.config.js
This file holds configs related to babel, Babels is a transpiler that transpile ES6 to ES5.
index.js
This is the entry point of your application form where your react-native code start executing.
EsLint and Prettier
These file related to maintaining the code indentation, Unused imports, extra, spacing, these files holds configs related to these things(EsLint and prettier are used to avoid above-mentioned things).
.watchMan
watchman watches the code changes when the packager is running, so this file have configs about this.
.Flow
Flow is been used for type checking so it holds the configs related to this.
node_modules
This folder holds all of the modules that your app is been using also lited down in your package.json.
And then there is Android(which holds native android code), IOS(which holds native ios code), and other JS files which holds code react-native js code.
Bootstrapped CRA 3.0 app and then ejected.
Inspecting my package.json.
Found multiple packages usages of which are not really clear to me.
"semver": "6.0.0"
Why do I need this? No usages found in config/* nor scripts/*. It seems like an artifact of react-scripts validation-like logic for related packages, so it looks like a piece of bloat in my application dependencies.
"react-app-polyfill": "^1.0.0"
Polyfills for IEs and etc.? OK, but why a separate package? It's frightening to me to use some unknown package on top of core-js or babel-polyfill. And again, no usages found in an initial code base.
P.S. I'm not asking what these packages are, I'm asking why do I see them being unused in ejected scripts
Update: react-app-polyfill/jsdom is used in Jest setup files
create-react-app uses a package named react-scripts which hides all the different packages it uses underneath.
When you eject an application, the dependencies used by react-scripts are copied over to your own package.json. But for some scripts like the eject, various sections are removed using babel annotation like #remove-on-eject-begin. The dependencies used in these sections persist even after you eject.
This is how you find packages like semver that are not used anywhere in your application code. In an unejected create react app, that package would be used for verifying the semantic versions before ejecting.
These are safe to remove now. But they would not be factored into the static bundle you are creating anyhow.
I have been tasked to maintain an existing React site. It appears that all .js and .jsx files are being compiled into one react-application.js file. I have made some changes to the code and need to move the code to staging. However I am not sure how to proceed. Being fairly new to React I am sure I have missed something here. Can someone please point me in the right direction?
Image of the root folder as requested:
https://i.stack.imgur.com/dcIh2.png
Image of the resources/assets/js folder:
https://i.stack.imgur.com/IaHew.png
So, there's two important files I see in the root directory:
package.json
gulpfile.js
package.json
If you're not familiar with npm, you're going to need to be. package.json lists all the npm packages that are required to build and run this project. Once you have npm installed globally, you're going to want to run npm install on the command line from the root of your project.
gulpfile.js
gulpfile.js is a script that should be executed by the task runner gulp. You're also going to want to have gulp installed and review the documentation to familiarize yourself with it. Your gulpfile.js will define one or more tasks. One of these most will likely transpile and bundle your .jsx files into a single browser friendly script. It most likely makes use of other npm packages to do so, which you also may need to familiarize yourself with.
You can run these various tasks by calling gulp [taskname] from the command line in the root directory. Quite likely there is a master task set to default which will run by simply calling gulp.
There's a pretty good chance gulp is also set to compile Sass and handle other tasks as well.
One more thing. The root directory also contains a .bowerrc. This would have been created by Bower, a package manager that was popular before npm. However there is no bower.json file, which I would expect to find.
This is a bit of a red flag for me. Hopefully, all of your dependencies are now included via package.json and whoever removed Bower just neglected to clean up the .bowerrc. But if your build process still depends on Bower assets, not having a bower.json is going to be a problem.
When I create an AngularJS project with
yo angular
it creates a node_modules/ directory but puts that directory in .gitignore. When I clone the project elsewhere and run
grunt server
I get
Fatal error: Unable to find local grunt.
If you're seeing this message, either a Gruntfile wasn't found or
grunt hasn't been installed locally to your project. For more
information about installing and configuring grunt, please see the
Getting Started guide:
The getting started guide doesn't say anything about how to handle the missing node_modules/ directory however.
The node_modules/ directory is missing deliberately because yeoman put it in .gitignore.
What's the right way to use Yeoman and Grunt in this case?
Is there some better documentation for Yeoman and Grunt?
Thanks.
That is the correct behaviour. The contents of node_modules is not meant to be committed to source control. The idea behind npm is that it tracks all required node dependencies in a file called package.json. This file should be committed to source control. Then on a different machine, you can check out the code and run
npm install
This looks at the package.json file and downloads all required files from the cloud and puts them all into a new node_modules directory.
If you do enough searching on the topic you'll eventually run across the following article which states that if you're building an application that you should check-in your dependencies. Reliance on package.json can cause issues as module authors publish updates, a better solution is to use
npm shrinkwrap
which creates a file locking down your dependencies and your dependencies dependencies but even this can be brittle as it is possible for a module author to re-publish the same version with different code.
Since yo angular is creating an application IMHO node_modules should not be included in .gitignore, however as I just rudely discovered if you're on Windows there's a significant chance that you can't check-in the modules in that folder due to path lengths...sigh.