I ran an analyzer on my production build, and there is weird xlsx(cpexcel.js) and moment.js library that I've not used anywhere in my App's code, also I am using react-rainbow library, though I have only imported only a few of components from there(Navbar), in the build, Whole library is included.
see source-map-explorer picture:
How can I make production build exclude these unused libraries and unused components?
Go to the project's root folder and run
npx depcheck
It will display all the unused packages in your project.
To uninstall a module simply run the below command
npm uninstall <package>
Related
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.
For react-admin-demo is it compulsory to do complete build of react-admin.
As per documentation it goes through clumsy make process.
Have anybody installed the folder itself by just npm install and run?
Any hints on how that can be simplified, to fork and create my own project?
Reference: https://github.com/marmelab/react-admin/tree/master/examples/demo
This is a mono repository which includes many packages. It uses learn and yarn workspaces. You'll have to use yarn.
There are several scripts inside the main package.json file which can help you start contributing without make. Each package inside packages can be built by running yarn build inside its folder.
To build all packages in one command, you can run ./node_modules/.bin/lerna run build inside the root folder.
As a newbie I am trying to understand what the logic is under the hoods for react packages in npmjs.com repository.
I find it a little bit strange since some modules that I install works flawlessly with my application (such as react-motion), where some reject to work by giving Uncaught SyntaxError: Unexpected token import error (such as react-sortable-pane).
What I understood up to now is it has something to do with ES5. The modules that are implemented with ES6 or ES7 must be converted to ES5.
My question is, how can I understand if a package is not ES5 compatible and what can I do to convert it to ES5 during or after I used yarn add command to install the package to my node_modulesdirectory?
TL:DR Transpile your code or use:
import { SortablePane, Pane } from 'react-sortable-pane/lib/react-sortable-pane.es5';
First things first.
Two main folders Src and Lib
A common convention for javascript projects is to put all of your development code into a folder called src. This folder may contain code such as ES5 or ES6 depending on what the developer wants to work with.
The other main folder is usually called lib which contains all code from src that is transpiled (with babel for example from ES6 to ES5), converted and usually bundled (webpack minify for example) so that it can work in the browsers that that npm package supports (varies from package to package obviously). This folder only contains code that is relevant to the user using the package, i.e. all tests are not converted and bundled because their is no reason to.
Entry Point
The other important part for npm packages is the entry point for the npm package. By default NodeJS will look for an index.js file in the imported package (I think). This can be overwritten by supplying the main key in package.json.
Example in react-motion's package.json:
"main": "lib/react-motion.js"
We can see that this points to lib. But where is the lib folder on their Github??? It's not their because usually you don't want to check in a lib folder to source control because it's just transpiled for the npm package.
We can confirm this by installing react-motion and looking in node_modules/react-motion. The lib folder here exists with transpiled code that is ready to be used in any browser without babel.
But why don't all npm packages do this for me!?!??!
Most do and they should do really. I do in my packages.
The react-sortable-plane npm package is using this instead "jsnext:main": "./lib/react-sortable-pane.js" which basically means it uses ES5 syntax everywhere but with import/export and I haven't seen before because it isn't widely used.
See https://github.com/rollup/rollup/wiki/pkg.module#wait-it-just-means-import-and-export--not-other-future-javascript-features
As to why they just use import/export with ES5 features I presume it's because import/export has become standard now but I am not sure.
You will still have to transpile this package if you want older browser support or just import the .es5.js file, e.g:
import { SortablePane, Pane } from 'react-sortable-pane/lib/react-sortable-pane.es5';
Hope this helps. I know it's confusing with so many damn environments like UMD, Common, Node etc...
The solution is to account for any version of Javascript and use a transpiler to make sure that various JS versions which might be in your code and imported modules will be covered by your transpiler's configuration. Going through your modules and trying to figure out which version of Javascript they use isn't a practical exercise. Most projects have a bunch of dependencies, and all those packages have their own dependencies. So you'll end up going down a rabbit hole.
Babel is probably the most well known transpiler. With the right configuration you can have ES5, 6 or 7 code and it will transpile it all into the same JS type so it can run in all standard browser versions.
Basically the answer isn't to try and deduce what ES type your modules are, it's to create a build process that can handle the different types.
I want to contribute to an open source React Component and I'd like to use a fork of the project in my webpack bundle.
I am using yarn and I tried to install my fork using
yarn add github:Startouf/react-coverflow
However, when webpack tries to compile my bundle, it raises weird errors
ERROR in ./~/react-coverflow/main.js
Module not found: Error: Can't resolve './dist/react-coverflow' in '/Users/Cyril/dev/MyApp/client/node_modules/react-coverflow'
Did I miss something ?
EDIT : when I use the released package from npm, the node module folder contains
LICENSE README.md dist main.js package.json
When I use my fork, it seems like the project isn't compiled and contains
LICENSE README.md package.json src webpack.config.js
Makefile main.js site test
Seems like I'm missing a step... I though doing yarn add with a github fork would automatically make a release but seems like I'm wrong ?
Unfortunately, using a repository directly as source can result in execution error. This is because it's not bundled at all, while the package expects an prebuilt version existing in dist. The bundling scripts are often executed before publishing releases to npm.
Some workarounds are:
execute the prepublish step in the target directory (this depends on
what the project uses)
of course, using the published version is the best. create your own package on npm and upload it.
References: npm issue
The package should be updated to include a prepare step.
A prepare step does exactly what you want in all cases.
https://stackoverflow.com/a/57503862/4612476
You can add the prepare script in package.json#scripts yourself that runs the build. Npm and Yarn will then automatically run the prepare script on install directly from GitHub. You can then treat it like any other package and it will always just workâ˘.
Don't forget the package.json#files section. See the linked answer for more details.
Can't find a good answer anywhere. We have a private Github repo that is an Angular module and the source needs to be built (concat, minified, etc.) and put in a dist file when consumed or installed as a dependency.
Notes:
dist is ignored, so it never resides on Github (tried tracking this, too many conflicts with several developers)
we are currently using a post install hook to build the dependency package source (this does NOT seem like the right thing to do, also forces the project consuming the dependency package to have the necessary build dependencies)
Q What is the right way (or the common ways) to build a private repo npm package dependency, resulting in a dist folder with the proper built files?