If I have a browserslist config, how can I check if a given JS file would work with the browsers specified in the config? I tried running Babel on it to see if it changes, but Babel always changes too much to be able to tell.
The parameters specified in your browserlist config should be honored by babel. If you'd like to test your configuration on a single file to ensure your browserlist config is visible to babel, you can use #babel/cli to execute a test run and check the results.
npm install --save-dev #babel/core #babel/cli
Then run the following command:
npx babel someFile.js --out-file script-compiled.js
That'll make it easy for you to poke around. Try some array methods like Array.from and Array.includes.
Related
I added the type: module but that didn't help.
I am trying to run mocha or jest tests that use import and export for the source files.
The existing questions about this have specifics that are different from mine and I also find them confusing to follow for someone with my specific situation, especially since I have developed a specific answer with details not relevant to the existing questions, but relevant to other people in my situation.
In the past, you could not use ES modules (i.e. import/export) in Node without transpiling your code using Babel. However, support for ES modules in Node is now a reality, and both Jest and Mocha have also recently added support for using ES modules natively.
It takes more than just adding "type": "module" to your package.json, however.
Steps for using native ES Modules in Jest
As already mentioned, add "type": "module" to your package.json
Install either jest-environment-node or jest-environment-jsdom-sixteen to your development dependencies. For example:
$ npm i -D jest-environment-node
Update the Jest configuration in package.json and add the testEnvironment setting. For example:
"jest": {
"testEnvironment": "jest-environment-jsdom-node"
}
If you are using a version of Node earlier than 13.2, then you will need to add two additional flags when running Node: --experimental-modules and experimental-vm-modules. I use npx to execute the commands, although it's a little verbose:
$ npx --node-arg=--experimental-modules --node-arg=--experimental-vm-modules jest
This will run all your Jest tests using the appropriate Node flags. I'd recommend making this your test script in package.json if this is the way you go.
Now you should be able to use import/export without Babel!
One last important point: when using native ES modules in Node, you have to use the entire import path to your local modules, including the file extensions. For example:
import lib from "./my/lib.js"
Here is the Node documentation on native ES modules, if you want to read about this in more detail: https://nodejs.org/dist/latest-v14.x/docs/api/esm.html
I'd also recommend reading through this Github issue for more details on the Jest implementation of native ES modules: https://github.com/facebook/jest/issues/9430
Per the Jest documentation, if you make sure babel-jest is installed and supply your Babel configuration per the Babel documentation, in a config file or package.json e.g.:
.babelrc.json
{
"presets": [
"#babel/env"
]
}
Then babel-jest will pick it up automatically and you don't need to explicitly pre-build the files to test them. This also means you don't have to set flags on the command line when calling Babel.
Note that if you do want to explicitly pre-build, I'd recommend:
Using a pre<script> script rather than having multiple steps in one line; and
Re-using the build script so you don't have to make changes in two places.
In your case:
"scripts": {
"build": "babel src/ --out-dir lib",
"pretest": "npm run build",
"test": "jest lib/*.test.js"
}
You need to use a compiler and then use the compiled files when running tests.
Many of the references say to add type: module but don't say much more.
To be clear, the basic message:
SyntaxError: Cannot use import statement outside a module
is because you are using import/export and you are trying to run the files directly without compilation.
The mindshift here is getting used to editing the files in one directory and running the tests in another. Alternatively, some solutions offer "in'flight" compilation so this detail is essentially hidden and only the source files are used.
There are a few different approaches to doing this depending on specific needs. Here is one of the simplest approach I've found so far, using Babel for the compilation step:
Install babel npm install babel --save-dev
Add babel commands in package.json scripts, for example:
"scripts": {
"test": "babel src/ --out-dir lib --presets=#babel/env; jest lib/*.test.js",
"build": "babel src/ --out-dir lib --presets=#babel/env"
}, // this was for jest but you can use mocha, etc as needed
// Note that using preset this way eliminates the need for a specific .babel.config.json file
Now, if you run:
jest .
you get SyntaxError: Cannot use import statement outside a module, but if you run npm t you get
Successfully compiled 2 files with Babel.
PASS lib/app.test.js
All tests
✓ Canary test (2ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Going forward, just remember to:
Edit files in src/
Run tests in lib/
I was learning webpack and babel and majority of tutorials on YouTube teach to install webpack and babel separately. But I tried to install webpack only without installing babel( and uglify.js). So, I used webpack then it automatically uglified and changed my ES6 code into ES5 how is that possible?. The question is Does webpack 4 use uglify.js and babel behind the scenes even if I do not install them manually?
Webpack does not contain Babel or uglify by default. These are contained within the loaders. These are seperate npm packages you need to install used in the configuration.
this question can give you an idea of how these are configured:
In order to check yourself if a package contains another package you can easily make an empty folder and run one of the following:
npm install --save webpack#4
yarn add webpack#4
and then check the 'yarn.lock' or 'package-lock.json' file and search for the dependency.
I wanted to understand if I need to add babel-loader, babel-core if my project has webpack version 4.7.0?
Initially I did not add babel-loader, and my code which contained ES6 compiled just fine and browsers got ES5.
If I do add babel-loader, I see the following warning in my npm or yarn tool install commands:
warning " > babel-loader#7.1.4" has unmet peer dependency "babel-core#6".
Hence I ask this question if I still need to add it as a devDependencies and configure it in the webpack configuration file to pre-process my .js files. I did not find documentation very clear about this.
Yes. It is still required as devDependency. You will need babel-loader, babel-core and babel-preset-env. Webpack 4 (or for that matter v4.7.0 which released today) essentially changes nothing.
As far as your webpack's behavior is concerned, it is rather strange. Can you share your config which I can replicate at my end?
I have to publish a npm package that is written with Flow and compiled using babel.
What I did was I compiled all my source files. Then I copied compiled files from dist/ and put them into some other directory. I also put package.json there and edited it and then I published the package on npm.
I can then normally install project and require it my project. However when I run my project, it throws error that I need to require babel-core and babel-polyfills (install them as dev-dependencies). The problem is since my new project only requires my own package and does not use babel or something like that, so I see no point in requiring babel dependencies in my new project.
My question is, how can I package my library that is written with Flow and compiled by babel, so that I can then use this package in other places without requiring babel.
Did you add main and files into your package.json?
https://docs.npmjs.com/files/package.json#main
https://docs.npmjs.com/files/package.json#files
Your files should probably be
"files": [
"dist/**"
],
Also to prevent Users who install your package from needing to install the transpilers (i.e babel) add them into your devDependencies
Directly from the https://docs.npmjs.com/files/package.json#dependencies
Please do not put test harnesses or transpilers in your dependencies object. See devDependencies, below.
Also to add flow to your dist add https://github.com/AgentME/flow-copy-source
flow-copy-source -v src dist
The problem was in using incorrectly defined preset
In my babelrc I only had defined
preset: "env" without specifying that it needs to run on node 8 and higher, since the code used async.
Therefore i defined preset as:
preset: ["env", {
targets: {
"node": "8.9.1"
}
}
And the asnyc functions compiles correctly.
Also, thanks to #Kenneth I used flow-copy-source to add type to my library, so it can be seen in intelisense.
I have a node project written in typescript#2.
My tsconfig has sourceMap set to true and the *.map.js files are generated. When I execute my transpiled *.js JavaScript files via node or nodemon, I only see the error messages relative to the js file and not to the mapped typescript files; I assume it's completely ignored.
Is sourceMap support only intended for browser-support? Or can I use it together with node or nodemon? If the latter, how would I enable it?
I want to see runtime errors detected from an executed javascript file relative to the original typescript file.
🚩 for Node versions since v12.12, there is an easier and better solution.
I recently got this working in my express app. Steps as follows:
Install the required library:
npm install --save-dev source-map-support
In your entry point (eg app.ts):
require('source-map-support').install();
In your app.ts, you may also require better logging for errors within promises:
process.on('unhandledRejection', console.log);
In your tsconfig, under compilerOptions:
"inlineSourceMap": true
The answers here are correct for Node versions before v12.12.0, which added the (experimental) --enable-source-maps flag. With that enabled, source maps are applied to stack traces without an additional dependency. As demonstrated in this article, it has the slightly different and possibly beneficial behavior of including both the generated .js file location and the source file location. For example:
Error: not found
at Object.<anonymous> (/Users/bencoe/oss/source-map-testing/test.js:29:7)
-> /Users/bencoe/oss/source-map-testing/test.ts:13:7
Install source map support:
npm install source-map-support
(I run in in production as well, as it immensely helps finding bugs from the logs of when an error an occurs. I did not experience a large performance impact, yet your experience may be different.)
Add to your tsconfig.json:
{
"compilerOptions": {
"sourceMap": true
}
}
When running your JavaScript file, add the require parameter:
nodemon -r source-map-support/register dist/pathToJson.js
node -r source-map-support/register dist/pathToJson.js
Alternatively, you add in your entry call:
require('source-map-support').install()
yet I find this tedious is projects with multiple entry points.
Sidenote: mocha also supports the --require / -r option, so to have the sourcemap support in mocha you can also call your tests with it, e.g. similar to:
NODE_ENV=test npx mocha --forbid-only --require source-map-support/register --exit --recursive ./path/to/your/tests/
I found this npm module which seems to do the trick:
https://github.com/evanw/node-source-map-support
run npm install source-map-support --save at the root of your node project and add import 'source-map-support/register' to your main.ts or index.ts file.
That's it.
Source map support works perfectly fine with node
All you need to do is add
"source-map-support": "0.4.11",
to dependencies or dev-dependencies in package.json by running
npm install --save source-map-support
And in your entry point ts file, simply add at the top
require('source-map-support').install()
(note: this is calling nodeJS require - there is no need for source-map-support definition files)
For Node versions from v12.12.0 use the --enable-source-maps flag when you run node.
Example: node --enable-source-maps main.js
Do not install "source-map-support" for Node versions from v12.12.0