What is the webpack equivalent of -g in rollup? - javascript

I'm packaging d3-color module for debian. Since rollup is not packaged yet, I'd like to use webpack as bundler. d3-color package.json has the following command to build the umd module.
rollup --banner \"$(preamble)\" -f umd -g d3-color:d3 -n d3 -o build/d3-interpolate.js -- index.js"
I want to know how to convert -g d3-color:d3 to webpack. I looked at Webpack equivalent for browserify shiming(global) of already included modules but that does not work.
https://anonscm.debian.org/cgit/pkg-javascript/node-d3-interpolate.git/log/?h=webpack (packaging source)

From https://webpack.js.org/guides/author-libraries/#externalize-lodash I tried this,
externals: {
'd3-color': {
commonjs: 'd3-color',
commonjs2: 'd3-color',
amd: 'd3-color',
root: '_'
}
}
and it seems to be working.

Related

Module not found: Error: Can't resolve 'crypto', webpack < 5 used to include polyfills for node.js core modules by default

I was trying to build the react project using npm run build but it failed with the following messages.
❯ npm run build
> coin-web-test2#0.1.0 build
> react-scripts build
Creating an optimized production build...
Failed to compile.
Module not found: Error: Can't resolve 'crypto' in '/Users/...../node_modules/web3-eth-accounts/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }
I tried to configure config-overrides.js and webpack.config.js with these commands
(thanks to answer)
webpack.config.js:
module.exports = {
resolve: {
fallback: { crypto: false },
},
};
However, I'm still receiving the same error.
Later on, I found that the default react-scripts bundled in node_module contains it's own webpack.config.js and it may interfere with mine. Not sure about this tbh. Would be nice if someone can explain.
And eventually, I changed the "scripts" in package.json to this and the error finally disappeared
"scripts": {
"start": "NODE_ENV=production node_modules/react-scripts/bin/react-scripts.js start",
"build": "NODE_ENV=production node_modules/react-scripts/bin/react-scripts.js build",
....
},

Convert Node.js files to ES5

I have node.js script files which I am trying to re-use inside an ASP.NET application on IE 11.
I follow below steps to use them on IE 11:
Create a bundle file using browserify:
browserify Module.js --standalone mymodule -o bundle.js
Convert the ES6 version of bundle.js to ES5 by manually converting it using https://babeljs.io/repl.
Save the converted ES5 script and include the saved .js file as in ASP.NET application.
Is there anyway I can automate step 2? Is there any better way to convert Node.js files to ES5?
Since you use Browserify, you can use Babelify which is a Browserify transform:
npm install --save-dev babelify #babel/core #babel/preset-env
browserify Module.js --standalone mymodule -o bundle.js -t [ babelify --presets [ #babel/preset-env ] ]
See the babel-preset-env documentation to see how to define your target ("ie": 11), by default all ES2015+ syntax will be transformed.

Migrating create-react-app from javascript to typescript

I started a react project using create-react-app few months ago and I'm interesting in migrating the project from Javascript to Typescript.
I saw that there is a way to create react app with typescript using the flag:
--scripts-version=react-scripts-ts
But I didn't find any explanation how can I migrate an existing JS project to TS.
I need it to be done incrementally so I can work with both .js and .ts files so I can do the transformation over time.
Does anyone has any experience with this migration? What are the required steps that should be done to make this work?
UPDATE: create-react-app version 2.1.0 support typescript so for those of you who are starting from scratch you can use it to create new application with typescript, and according to the documentation it should be done with the following command:
$ npx create-react-app my-app --typescript
For existing projects, after updating to version 2.1.0, add the following packages to your project's dependencies with the following command:
$ npm install --save typescript #types/node #types/react #types/react-dom #types/jest
and then you can simply rename .js to .ts files.
I found a solution to migrate create-react-app from javascript to typescript, this way doesn't require eject.
Create a temporary react project with typescript by running the command create-react-app --scripts-version=react-scripts-ts
(Note - requires create-react-app to be installed globally)
In your own project - under package.json file remove the react-scripts
Add react-scripts-ts to your project by running the command yarn add react-scripts-ts or if your are using npm then npm install react-scripts-ts. Or, add "react-scripts-ts": "2.8.0" to package.json.
From the project you created in step 1 copy the files: tsconfig.json, tsconfig.test.json tslint.json to your own project
Under your own project, in package.json, under scripts section, change react-scripts instances to react-scripts-ts (should be under start, build, test and eject
Install the typings for react by installing the following modules using yarn or npm: #types/node, #types/react and #types/react-dom. Put in devDependencies section if using package.json.
Change index.js file name to index.tsx
In your tsconfig.json file add the following configuration: "allowSyntheticDefaultImports": true - for more info
NOTE step 7 might require additional modification depends on what you have in your index.js file (if it depends on JS modules in the project).
Now you can run your project and it might work, for those of you who are getting error that contains You may need an appropriate loader to handle this file type regarding .js files, it happens because babel doesn't know how to load .js file from .tsx files. What we need to do is to change the project configuration. The way I found doing it without running eject is using react-app-rewired package. This package lets you configure external configuration which will be added/override the default project settings. What we'll do is using babel to load these type of files. Let's moved on:
Install the package react-app-rewired using yarn or npm
In your root folder (where package.json is located) create a new file with the name config-overrides.js
Put this code in config-overrides file:
var paths = require('react-scripts-ts/config/paths')
module.exports = function override(config) {
config.module.rules.push({
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
cacheDirectory: true,
},
})
return config
}
Edit package.json so the start/start-js, build, test, and eject scripts use react-app-rewired as shown in the project readme. E.g. "test": "react-app-rewired test --scripts-version react-scripts-ts --env=jsdom".
Now you can start you the project and the problem should be solved. You might need additional modifications depending on your project (additional types and so).
Hope it helps
As suggested here in the comments, it's possible to define: "compilerOptions": { "allowJs": true} in your tsconfig.json file, so you can mix JS and TS without react-app-rewired. Thanks for mention this!
Create React App v2.1.0 was released today with TypeScript support today. That means you no longer need to eject or use the react-scripts-ts fork; all you need to do if you have an existing Create React App project is install the required packages:
$ npm install --save typescript #types/node #types/react #types/react-dom #types/jest
$ # or
$ yarn add typescript #types/node #types/react #types/react-dom #types/jest
You can then simply rename .js files to .ts files to start using TypeScript.
(If you have an existing app using the create-react-app-typescript fork, here's a tutorial on how to port it to regular Create React App.)
You will need to eject a configuration in order to do that.
After ejecting you need to perform the following steps:
Add typescript extensions tsx and ts to the extensions table
in the webpack configs (dev and prod).
Add ts-loader. Here is an example
{
test: /\.(ts|tsx)$/,
include: paths.appSrc,
use: [
{
loader: require.resolve('ts-loader'),
},
],
},
Change eslint to tslint
Add source-map-loader to get a possibility to debug Typescript files.
{
test: /\.js$/,
loader: require.resolve('source-map-loader'),
enforce: 'pre',
include: paths.appSrc,
}
Create a Typescript config file and remember to set allowJs to
true.
1). run
npm install --save typescript #types/node #types/react #types/react-dom #types/jest
or
yarn add typescript #types/node #types/react #types/react-dom #types/jest
2). Add the tsconfig.json
run npx tsc --init
3). Add this to the tsconfig
"compilerOptions": {
"jsx": "react-jsx", // this line
Now you can integrate tsx into an existing project 😊
1). run
npm install --save typescript #types/node #types/react #types/react-dom #types/jest
or
yarn add typescript #types/node #types/react #types/react-dom #types/jest
2). Rename any file to be a TypeScript file (e.g. src/index.js to src/index.tsx)
3). run npm i #types/react-dom #types/react-redux #types/react-router-dom
4). Restart your development server!
enjoy :)

using webpack in npm scripts section to transcompile es6

using browserify, i can transcompile es6 to es5 by adding this to package.json -> scripts.
How do i do it using webpack and npm script?
"build-modular": "browserify index.js -t babelify -o index-bundle.js"
In webpack instead of transforms you use loaders. Usually you configure loaders in a webpack configuration file. However, you can also bind loaders in the command line.
As you want to babelify your index.js file, you need to install the corresponding babel-loader and the required babel packages:
npm install --save-dev webpack babel-core babel-loader babel-preset-es2015
Now you are able to create your build script entry like this:
"build-modular": "webpack index.js index-bundle.js --module-bind 'js=babel?presets[]=es2015'"
And run it:
npm run build-modular

How to browserify, compile ES6 and minify NodeJS application

I am trying to get to grips with browserify and ES6 simultaneously. I have the following basic Node files:
main.js
var foo = require('./foo.js');
var x = foo.math(200);
console.log(x);
foo.js
exports.math = (n)=>{
return n * 111;
};
Now I want to do the following:
Browserify this into a file bundle.js so I can include it as a script in my website
Compile the JS using babel to make the ES6 readable by all browsers
Minify bundle.js to improve load times in the browser
I have browserify installed globally and I run that with this command:
browserify main.js > bundle.js
Works great. But should I be running babel first? How do I complete my 3 step process and in what order (of course minification will have to happen last)? Should I be doing this all with grunt?
It shouldn't be necessary anymore to use a task runner. However, use a neat plugin like babelify from command line as described in its README.md here.
npm install --save-dev browserify babelify babel-preset-es2015
browserify script.js -o bundle.js \
-t [ babelify --presets es2015 ]
And add other transforms as needed from here or any where else, e.g. uglify.
For es6 use uglify-es, it supports ES6.
npm install uglify-es -g
Uglify ES has not been updated in a year and is not maintained and will probably not work. I suggest using Terser with a plugin like uglifyify run the following to install uglifyify
npm i uglifyify
as of 2018 babelify needs #babel/core (babel 7) and a preset like #babel/preset-env
Install them like this:
npm i babelify #babel/core #babel/preset-env
Finally
browserify \
-t [ babelify --presets [[ #babel/preset-env]] \
-g uglifyify main.js > bundle.js

Categories

Resources