I'm using jest for doing testing and currently I can ignore node_modules. The issue, however, is that theres 1 package in node_modules that I want to get transpiled with babel. Right now my ignored patterns look like this:
testPathIgnorePatterns: ['./node_modules/'],
if my package is called 'my-package', how can I make it so testPathIgnorePatterns doesn't ignore that inside node_modules?
TL;DR - use this config key with this regex:
transformIgnorePatterns: ['/node_modules\/(?!my-package)(.*)']
This is a 2 part answer.
Part 1 - the regex
The testPathIgnorePatterns key takes an array of strings/regex, so I can pass a regex that will match all node_modules except the one I want with something like this:
// one way to do it
testpathIgnorePatterns: ['/node_modules\/(?!my-package).+\.js$']
// another way to do it - this regex seems simpler to me
testpathIgnorePatterns: ['/node_modules\/(?!my-package)(.*)']
this basically says, ignore all node_modules except my-package. However, the thing to note here is, testPathIgnorePatterns does not determine whether a module should be transpiled by babel or not. This key is for jest to know where your test files are. Basically, using this key, you're telling jest 'dont look in node_modules for files with the .test.js extension', because you don't want to run the tests of imported node_module packages.
So, in reality, you want to ignore this setting completely because jest will automatically default it to ['/node_modules/'], or if you wanted to add other paths to ignore, you'd need:
testpathIgnorePatterns: ['other/file/path', '/node_modules/']
Part 2 - where to use the regex
Given the context from part 1, the correct place to put the regex to allow jest to transpile specific packages from node_modules is: transformIgnorePatterns. So it would look like this:
transformIgnorePatterns: ['/node_modules\/(?!my-package)(.*)']
this way, jest will not transpile any node_modules packages except 'my-package'. I believe the default value for both of the keys mentioned above is 'node_modules' - meaning, node_modules is automatically ignored in both the testPath and the transform
Jest docs for these configuration settings
Related
I've just tried updating to create-react-app 4, and have a ton of typescript eslint warnings, particularly
Missing return type on function #typescript-eslint/explicit-module-boundary-types
Is there any way to override these in a .eslintrc.json file for runtime?
I've currently got overrides that work there for my project when I explicitly execute
npm run lint
But when I use npm run start I get a ton of lint warnings that I can't seem to control.
Is there any way to do this?
It turns out there is a way to override the .eslint rules.
Create a .env file in your root, if you don't have one.
Add the following to it as a new line: EXTEND_ESLINT=true
Extend the lint rules in your favorite way. I use .eslintrc.json but other mechanisms exist
Now with that in place, have a look at the included rules from react, which live in
node_modules\eslint-config-react-app\index.js and copy the rules you like into your rules section.
You may also want to pay careful attention to the overrides section, examples of which you can see in the above file, and if you have js in your project, you may want to remove the default parser,
parser: 'babel-eslint'
and then only override for typescript files.
The postinstall stage for my package.json uses tsc. I'd like to make it so such a global dependency is never expected of the user, and the solution is to replace it with ./node_modules/typescript/bin/tsc.
Unfortunately, this only works if node_modules is a subfolder of the one I'm currently in. So what I would like to do is use some form of env variable which probably exists but I can not find to do this:
$ROOT_NODE_PACKAGE/node_modules/typescript/bin/tsc $CURRENTLY_INSTALLING_PACKAGE
How do I do this?
I am new, and when i first created my app based on the documentation using npm create-react-app i found it there were a lot of package included inside folder node_module when i code and i only use react and react DOM and etc from the basic.
node_modules
acorn
timer
ansi
and many more
I wonder if anyone can help my how to understand each use inside the node_module or where can i find the documentation for each use?
or how can i just reduce to what i want to use only to decrease the app size?
The answers are 2:
because you're using an automated scaffolding tool, which essentially does everything for you, and, you have just to code, it is supposed to locally deploy all the packages it needs to work (for example webpack is needed to bundle your code, babel to transpile it, ...
under node_modules you will find all the packages of the whole app. That's means you will find both your dependencies and the dependencies of your dependencies (this rule has some exceptions and you can find them in the npm documentation.
example:
// your code depends on A
var dependency = require('A');
// but then, inside your A dependency you can also find something similar to:
var b = require('B');
how can i just reduce to what i want to use only to decrease the app size?
You basically can't do it. They are all needed.
Most of the libraries that we pull from npm have dependencies. You may use only react and react-dom but there are react-scripts that require lots of stuff. I don't think that you have to worry about the size of the node_modules. That's not what you are suppose to ship in production.
If you want to see what are these all modules about you may open their folder and fine README.md file.
I have two npm projects, project-a and project-b. They both publish and ought to be able to be directly depended upon by any npm project in my company. project-a depends on project-b. They both live as siblings in the same Git repo.
I want to directly import certain components from project-b into project-a. I'm very close -- by specifying a resolve.alias in project-a that looks like project-b: path.resolve(__dirname, '../project-b/entrypoint.js') I can pull in what entrypoint.js offers. However, when Webpack attempts to resolve what entrypoint imports, it looks first in project-b/node_modules. This is a problem for two reasons: we use React, so this pulls in multiple copies of React (project-a/node_modules/react and project-b/node_modules/react), which React users know will break the UI, and similarly it pulls in multiple copies of any shared dependency, of which there are many, leading to a considerable amount of otherwise benign bloat in the Webpack artifact of project-a.
My hunch is there must be a way to tell webpack to, when resolving imports in project-b, first look in project-a and failing that go ahead and look in project-b. This way it'll first look in project-a/node_modules for react whether the import statement is in project-a or project-b, leading to only project-a/node_modules copies of shared dependencies in project-a's artifact, while successfully allowing unique project-b dependencies / components to be resolved. I've played around a bunch with resolve.root, resolve.modulesDirectories, and resolve.fallback, but haven't been able to achieve what I want.
Any ideas?
I ran into a similar issue in my project, also with multiple copies of React being included in the bundle.
The solution is quite simple -- add this to your webpack (version 2) configuration under the resolve key:
modules: [path.resolve(__dirname, "node_modules"), "node_modules"]
This instructs webpack to resolve in node_modules within the build directory before resolving in node_modules in other directories. In your case, this should mean that the module is grabbed from project-a/node_modules instead of project-b/node_modules.
You can find more documentation here.
My project has a node dependency which depends on a environment variable to be set, the code is something simple as const KEY = process.env.SOME_KEY.
I understand that react-native has no support for traditional environment variables.
What are de options to fulfill this need and make this code work? Supposing I don't have control over the dependency's code.
The solution is pretty straight forward here, you should go with a custom babel transformer that will replace all process.env. calls within your code with real env values during transpilation step (during that phase there's an access to environmental variables). Transforms are also applied to the dependencies of your app which means you can apply neccessary modifications to the 3rd party code w/o actually changing it.
In order to do it, you should first create a .babelrc file like the one below and place it in the root of your project:
{
"presets": ["react-native"],
"plugins": [
"transform-inline-environment-variables"
]
}
Once that's done, go and npm install babel-preset-react-native and babel-plugin-transform-inline-environment-variables.
Finally, rerun react-native start (basically restart the packager) and all your process.env calls will be replaced.