In my Nodejs application, I use React. I browserify + reactify to transform .jsx files to js files.
I use this line of code in my entry js file :
require('node-jsx').install();
I noticed that node-jsx is deprecated. Do I still need to have this line if I already reactify my react files ?
No, it is not necessary to use either node-jsx or JSXTransformer when using reactify. Reactify does all the transforms needed.
Most likely the reason node-jsx is deprecated is because it is a very bad idea to compile at runtime, as the browser has to download the entire compiler and the compiler will take time to load. Always pre-compile JSX, babel, and coffeescript.
Related
I have a slight problem with a basic Node.JS method. When I'm trying to use "require()' method to import any downloaded (with 'npm install ..) module/library, I get a Visual Studio Code message that asks 'to convert 'require'(which is a Common JS module) into ES. If I do it, it transforms 'require()' into 'import..' though I want keep using 'require()'. Why is it so ? I read somewhere that Common JS is already included in the Node.JS environment though.
Then, when trying to compile my index.js file (with 'node index.js'), I obviously get an error about 'require' not recognized method.
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users...index.js from C:\Users...index.js not supported.
I tried then to install Webpack to fix this issue, but nothing change. I also kind of installed CommonJS (npm i common-js)..
Another common answer was to remove 'type':'module' from package.json file which normally should allow to use 'require', but I don't even have such a line in the file.
On top of that I've recently read that 'require' is not compatible with browser development tools (it's ok). But I'm trying to import a downloaded module/npm package in VSC terminal, not even in a browser.
As you understand I'm new to Node.JS, but I don't really get what's going on in this case...
I have been absent from nodejs development for a few years, and to my surprise when I did
$ npm install lodash
the size of my node_modules grew by 4.8MiB
how come a library that judging by its source line count should be around 260KiB takes so much space?
I am deploying my code as an AWS Lambda, and the ability to edit and debug in the console is lost due the increased size of my distribution file (partly because of this).
What's the 2019 way to deal with this?
You node_modules size is irrelevant.
If you build you application the size is much much smaller:
minified 69.2kb
minified + gzipped 24.3kB
see here
If you're using Webpack, ESBuild, or a similar bundler with tree-shaking capabilities, you can import lodash functions discretely.
import foo from 'lodash/foo';
Support for this syntax was added in Lodash v4.
Note the syntax should be 'lodash/foo'. Contrarily, import { foo } from 'lodash' will not be tree-shaken.
Like Norbert said, your node_modules size is irrelevant. You'll want to look at the size of your bundle after building your application. In the case of Webpack, you can use Webpack Bundle Analyzer to gain additional insights into your bundle's distribution. For Vite and other toolchains that use Rollup, consider rollup-plugin-visualizer.
Here's a few more tips:
As of lodash v4, tree-shaking works without additional configuration in Webpack >= v4 and ESBuild. If you use lodash-es and you have other dependencies that require lodash, both will end up in your bundle.
If you're using Babel, and you don't want to refactor your entire codebase to use the aforementioned lodash/foo syntax, consider using babel-plugin-lodash. This plugin rewrites lodash import statements to use the tree-shaking syntax for you.
If you're using Babel's preset-env plugin, set the modules option to false. Babel rewrites modules to use CommonJS by default, which won’t tree-shake.
If you're only using a single Lodash function, you can install it as a standalone module in lieu of installing the entire lodash package. e.g. npm install --save lodash.functionName
lodash-es introduces a few exceptions to this strategy. Refer to this answer for more insight into this.
Im new to typescript. Im using a serverless solution from google (google cloud functions) that in the background is running Node.js with typescript. When I get an "runtime error" in the logs I see an error in a .js file, this makes sense since .ts code is compiled to .js but it makes debugging a lot harder as I write typescript code and not javascript code. In general I would like to see the line that produced the error in .ts and not in .js. Is this possible?
You will need a "source map" to map the JavaScript line numbers to TypeScript line numbers.
You can do this with the source-map-support node module. First install it in your project:
npm install source-map-support
Then add this to your TypeScript file (index.ts):
require('source-map-support').install()
Then, if you function crashes, the line numbers should show TypeScript source lines.
It's possible to use coffeescript files without compiling it on node, not directly of course but after importing "cofffee-script/register". I am wondering though if it's possible to feed coffeescript file to node directly, forcing it to import "coffee-script/register" by default? so I could do this from the command line
node debug my-app.coffee
Maybe somehow tweaking require.cache?
Now that CoffeeScript supports the new Source Map hotness, I was wondering if I can also use the source maps not just in my browser, but on the command line while developing my nodeJS apps.
I want the JS compiler to give me more useful error traces where the lines actually match with my coffeescript files instead of compiled JS files.
The source-map-support module does this, just install the module and put this at the top of your code:
require('source-map-support').install()
Now with CoffeeScript 1.6.2 it just "works" if you run your app with the coffee command :)
Until coffee-script gets some better support for require(), try this:
https://npmjs.org/package/coffee-script-mapped