I'm building a webpack app and I'm interested in use ESM through the entire app, meaning that build the webpack.config file with ESM imports.
I now this is possible using Babel, but this was before npm added the "type": "module" supporting now ESM imports without babel... I already tried it with Express and it worked but with Webpack I get this:
> ...proyectDirectory/node_modules/webpack-cli/bin/cli.js:93
> require() of ES modules is not supported.
So I was wondering if there is a version of webpack-cli that use import instead of require
Update to at least webpack-cli 4.5.0. Support for native ESM configuration files has just been added: https://github.com/webpack/webpack-cli/releases/tag/webpack-cli%404.5.0
This means that if you're using webpack.config.js in a directory with {"type": "module"} in its package.json, it will work.
It will also work if you simply name your file webpack.config.mjs
Webpack CLI is expecting a commonJS file. There is experimental support for .mjs file that can be enabled using the experiments.mjs flag but it seems there are a number of issues around that. So you can use webpack by using either no config or using a .cjs config as:
./node_modules/.bin/webpack-cli --config webpack.config.cjs
Also keep in mind that things like Jest do not work with esm (as of this date) so you'd need to use another test suite if no babel/esm was desired.
Related
For me, Webpack is a bundler for "web" since browsers don't have good support for js module system. Thus using Webpack we could still use "module" way to develop and pack them for browsers.
Webpack has a config option target
module.exports = {
target: 'node'
};
using node webpack will compile for usage in a Node.js-like environment
But NodeJS already support CommonJS modules, why need Webpack to build something that runs in NodeJS environment?
Besides, if you want to compile your javascript, for example, using the ES module, you could just use babel to do so, using es module transform plugins or proper presets.
Why use Webpack, set the target to node and then use babel loader... instead of using babel directly?
I cannot think of the use case of using Webpack to bundle application running in node.
One reason I can think of when to use webpack for node is when you have a node_modules package where it's not compiled yet (Still in ES6).
babel-node won't be able to help you bundle the node_modules packages that need to be transpiled along with the rest of your code
I had to go through this process.. ): This scenario is helpful in Yarn Workspaces where you want your server to depend on another package in your workspace. Where your server will re-update whenever you make changes in the other package with the help of webpack
How to include a few node_modules package in babel-node
Having a single server.js output
instant deployable on a server
no worry about mismatching dependencies compared to your dev environment.
In my project I need to use the npm module ipfs-api with create-react-app.
I can run npm start and run the proect.
But when I try to build the proect with react-scripts build, it throws the following error
Failed to compile.
Failed to minify the code from this file:
./node_modules/ipfs-api/src/utils/module-config.js:7
Read more here: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify
According to the suggestions in the provided link in eorror log, I tried using,
"dependencies": {
...
"ipfs-api": "github:atfornes/js-ipfs-api#transpiled",
...
}
instead of "ipfs-api": "^22.0.0",. Although this solved error for ipfs-api, other dependent modules (probably installed with ipfsapi) kept giving same type of Failed to minify errors which I stopped transpiling them manually.
Is there a way to transile all the dependent node modules to es5 while before using the command react-scripts build ? Or any other way to overcome this issue?
Usually client-side or platform independent packages are compiled to ES5 on publishing. That you have this problem may suggest that the package isn't intended for client side.
As the documentation explains, the package contains a bundle for browsers that includes polyfilled Node features (streams, etc.) that are needed to run it on client side.
It's supposed to be used as a global:
import 'ipfs-api/dist';
ipfs(...)
Is there a way to transile all the dependent node modules to es5 while before using the command react-scripts build ?
This would require to eject create-react-app configuration and configure Webpack to transpile this package properly. This example from the documentation shows how Node-specific parts should be configured to bundled for browsers.
I am using the latest nodejs version, but am still getting an error while using es6 module import.
I could also find on a blog that node doesn't yet support es6 import module.
https://nodesource.com/blog/es-modules-and-node-js-hard-choices/ - no JavaScript runtime currently supports ES Modules.
I am new to javascript and node, is anyone using es6 module import with nodejs, without transpiling the code to lower js versions.
You can if you are willing to use a tool like Babel.
npm i -D babel babel-cli babel-core babel-preset-es2015
Create a file .babelrc and put the following in it:
{
"presets": ["es2015"]
}
And then in package.json in the scripts section do some thing like this:
"dev": "babel src -d dist && node dist/your_file.js"
This will transpile all of the code in a directory named src/ but it in a directory called dist/, and then run the file you specify.
It can then be used via the command as follows:
npm dev
UPDATE 2019:
import / export statements are supported in node v12.
Right now behind the --experimental-modules flag.
Which is supposed to be removed this October.
According to Angular2 docs, TypeScript is at final downgraded to ES5.
my question is when I run the app (npm run server, or npm start) how can have access to ES6-with-decorators or ES5 translated files of Angular2 app.
the current app I have now is created by webpack-angular2-starter.
I need the ES6 or ES5 files for complexity analysis, cause I am using Plato that I think is the best in this work.
webpack-dev-server is serving all of our files from memory.
though in the webpack.dev.js the output is defined as path: helpers.root('dist'), where helper by default has the path to root of the project but you can not see any folder called dist.
the easiest way is to install webpack globally and just command webpack or in this case npm run build:prod then the dist folder is getting generated in the root of the project
I need the ES6 files...
They don't exist separately from the TypeScript files unless you create them. The TypeScript compiler can be told what kind of output to generate (ES3, ES5, ES6/ES2015, etc.) via the --target option, e.g., --target ES2015 (or its synonym --target ES6).
So if you need ES6 files for complexity analysis, you can use the TypeScript compiler to read the TypeScript files and output ES6 files.
In production, I use webpack config with UglifyJsPlugin.
As you know there are some npm modules with es6 syntaxes. During deploy on production I am getting error:
ERROR in bundle.js from UglifyJs Unexpected token name «i», expected
punc «;» [./~/joi/lib/index.js:167,0]
This is because joi module uses es6 syntax (for (let i in etc..)), but uglify can't handle it.
I've solved problem, precompile several modules (only who use es6) with babel-cli util
babel src lib
and replace old folder with new one. But it is noncense =). How can I handle array of node modules (not all!, only specified) with webpack config? Thank you!
There is only some harmony support on the harmony branch of uglifyjs (which is still under development and not ready for production). As for UglifyJS v2.0...2.6.2 there is only support for pre-harmony/pre-es6 code.