Leonard  Paucek

Leonard Paucek

1653386400

Esbuild: An Extremely Fast JavaScript and CSS Bundler And Minifier

 Why?

Our current build tools for the web are 10-100x slower than they could be:

Bar chart with benchmark results

The main goal of the esbuild bundler project is to bring about a new era of build tool performance, and create an easy-to-use modern bundler along the way.

Major features:

Check out the getting started instructions if you want to give esbuild a try.


Author: evanw
Source Code: https://github.com/evanw/esbuild
License: MIT license

#react-native #react 

What is GEEK

Buddha Community

Esbuild: An Extremely Fast JavaScript and CSS Bundler And Minifier

Esbuild: An Extremely Fast JavaScript and CSS Bundler And Minifier

Getting Started

Install esbuild

First, download and install the esbuild command locally. A prebuilt native executable can be installed using npm (which is automatically installed when you install the node JavaScript runtime):

npm install esbuild

This should have installed esbuild in your local node_modules folder. You can run the esbuild executable to verify that everything is working correctly:

UnixWindows

.\node_modules\.bin\esbuild --version

The recommended way to install esbuild is to install the native executable using npm. But if you don't want to do that, there are also some other ways to install.

Your first bundle

This is a quick real-world example of what esbuild is capable of and how to use it. First, install the react and react-dom packages:

npm install react react-dom

Then create a file called app.jsx containing the following code:

import * as React from 'react'
import * as Server from 'react-dom/server'

let Greet = () => <h1>Hello, world!</h1>
console.log(Server.renderToString(<Greet />))

Finally, tell esbuild to bundle the file:

UnixWindows

.\node_modules\.bin\esbuild app.jsx --bundle --outfile=out.js

This should have created a file called out.js containing your code and the React library bundled together. The code is completely self-contained and no longer depends on your node_modules directory. If you run the code using node out.js, you should see something like this:

<h1 data-reactroot="">Hello, world!</h1>

Notice that esbuild also converted JSX syntax to JavaScript without any configuration other than the .jsx extension. While esbuild can be configured, it attempts to have reasonable defaults so that many common situations work automatically. If you would like to use JSX syntax in .js files instead, you can tell esbuild to allow this using the --loader:.js=jsx flag. You can read more about the available configuration options in the API documentation.

Build scripts

Your build command is something you will be running repeatedly, so you will want to automate it. A natural way of doing this is to add a build script to your package.json file like this:

{
  "scripts": {
    "build": "esbuild app.jsx --bundle --outfile=out.js"
  }
}

Notice that this uses the esbuild command directly without a relative path. This works because everything in the scripts section is run with the esbuild command already in the path (as long as you have installed the package).

The build script can be invoked like this:

npm run build

However, using the command-line interface can become unwieldy if you need to pass many options to esbuild. For more sophisticated uses you will likely want to write a build script in JavaScript using esbuild's JavaScript API. That might look something like this:

require('esbuild').build({
  entryPoints: ['app.jsx'],
  bundle: true,
  outfile: 'out.js',
}).catch(() => process.exit(1))

The build function runs the esbuild executable in a child process and returns a promise that resolves when the build is complete. The code above doesn't print out the captured exception because any error messages in the exception will also be printed to the console by default (although you can change the log level to turn that off if you'd like).

Although there is also a buildSync API that is not asynchronous, the asynchronous API is better for build scripts because plugins only work with the asynchronous API. You can read more about the configuration options for the build API in the API documentation.

Bundling for the browser

The bundler outputs code for the browser by default, so no additional configuration is necessary to get started. For development builds you probably want to enable source maps with --sourcemap, and for production builds you probably want to enable minification with --minify. You probably also want to configure the target environment for the browsers you support. All of that might looks something like this:

CLIJSGo

esbuild app.jsx --bundle --minify --sourcemap --target=chrome58,firefox57,safari11,edge16

Sometimes a package you want to use may import another package that is only available on node, such as the built-in path package. When that happens you can substitute the package for a browser-friendly alternative by using the browser field in your package.json file like this:

{
  "browser": {
    "path": "path-browserify"
  }
}

Some npm packages you want to use may not be designed to be run in the browser. Sometimes you can use esbuild's configuration options to work around certain issues and successfully bundle the package anyway. Undefined globals can be replaced with either the define feature in simple cases or the inject feature in more complex cases.

Bundling for node

Even though a bundler is not necessary when using node, sometimes it can still be beneficial to process your code with esbuild before running it in node. Bundling can automatically strip TypeScript types, convert ECMAScript module syntax to CommonJS, and transform newer JavaScript syntax into older syntax for a specific version of node. And it may be beneficial to bundle your package before publishing it so that it's a smaller download and so it spends less time reading from the file system when being loaded.

If you are bundling code that will be run in node, you should configure the platform setting by passing --platform=node to esbuild. This simultaneously changes a few different settings to node-friendly default values. For example, all packages that are built-in to node such as fs are automatically marked as external so esbuild doesn't try to bundle them. This setting also disables the interpretation of the browser field in package.json.

If your code uses newer JavaScript syntax that doesn't work in your version of node, you will want to configure the target version of node:

CLIJSGo

esbuild app.js --bundle --platform=node --target=node10.4

You also may not want to bundle your dependencies with esbuild. There are many node-specific features that esbuild doesn't support while bundling such as __dirname, import.meta.url, fs.readFileSync, and *.node native binary modules. You can exclude all of your dependencies from the bundle by marking them as external:

CLIJSGo

esbuild app.jsx --bundle --platform=node --external:./node_modules/*

If you do this, your dependencies must still be present on the file system at run-time since they are no longer included in the bundle.

Simultaneous platforms

You cannot install esbuild on one OS, copy the node_modules directory to another OS without reinstalling, and then run esbuild on that other OS. This won't work because esbuild is written with native code and needs to install a platform-specific binary executable. Normally this isn't an issue because you typically check your package.json file into version control, not your node_modules directory, and then everyone runs npm install on their local machine after cloning the repository.

However, people sometimes get into this situation by installing esbuild on Windows or macOS and copying their node_modules directory into a Docker image that runs Linux, or by copying their node_modules directory between Windows and WSL environments. The way to get this to work depends on your package manager:

npm/pnpm: If you are installing with npm or pnpm, you can try not copying the node_modules directory when you copy the files over, and running npm ci or npm install on the destination platform after the copy. Or you could consider using Yarn instead which has built-in support for installing a package on multiple platforms simultaneously.

Yarn: If you are installing with Yarn, you can try listing both this platform and the other platform in your .yarnrc.yml file using the supportedArchitectures feature. Keep in mind that this means multiple copies of esbuild will be present on the file system.

Another alternative is to use the esbuild-wasm package instead, which works the same way on all platforms. But it comes with a heavy performance cost and can sometimes be 10x slower than the esbuild package, so you may also not want to do that.

Other ways to install

The recommended way to install esbuild is to install the native executable using npm. But you can also install esbuild in these ways:

#Install the WASM version

In addition to the esbuild npm package, there is also an esbuild-wasm package that functions similarly but that uses WebAssembly instead of native code. Installing it will also install an executable called esbuild:

npm install esbuild-wasm

Why this is not recommended: The WebAssembly version is much, much slower than the native version. In many cases it is an order of magnitude (i.e. 10x) slower. This is for various reasons including a) node re-compiles the WebAssembly code from scratch on every run, b) Go's WebAssembly compilation approach is single-threaded, and c) node has WebAssembly bugs that can delay the exiting of the process by many seconds. The WebAssembly version also excludes some features such as the local file server. You should only use the WebAssembly package like this if there is no other option, such as when you want to use esbuild on an unsupported platform. The WebAssembly package is primarily intended to only be used in the browser.

#Use Deno instead of node

There is also basic support for the Deno JavaScript environment if you'd like to use esbuild with that instead. The package is hosted at https://deno.land/x/esbuild and uses the native esbuild executable. The executable will be downloaded and cached from npm at run-time so your computer will need network access to registry.npmjs.org to make use of this package. Using the package looks like this:

import * as esbuild from 'https://deno.land/x/esbuild@v0.14.21/mod.js'
const ts = 'let test: boolean = true'
const result = await esbuild.transform(ts, { loader: 'ts' })
console.log('result:', result)
esbuild.stop()

It has basically the same API as esbuild's npm package with one addition: you need to call stop() when you're done because unlike node, Deno doesn't provide the necessary APIs to allow Deno to exit while esbuild's internal child process is still running.

Why this is not recommended: Deno is newer than node, less widely used, and supports fewer platforms than node, so node is recommended as the primary way to run esbuild. Deno also uses the internet as a package system instead of existing JavaScript package ecosystems, and esbuild is designed around and optimized for npm-style package management. You should still be able to use esbuild with Deno, but you will need a plugin if you would like to be able to bundle HTTP URLs.

#Build from source

To build esbuild from source:

  1. Install the Go compiler:

https://golang.org/dl/

2.   Download the source code for esbuild:

git clone --depth 1 --branch v0.14.21 https://github.com/evanw/esbuild.git
cd esbuild

3.   Build the esbuild executable (it will be esbuild.exe on Windows):

go build ./cmd/esbuild

If you want to build for other platforms, you can just prefix the build command with the platform information. For example, you can build the 32-bit Linux version using this command:

GOOS=linux GOARCH=386 go build ./cmd/esbuild

Why this is not recommended: The native version can only be used via the command-line interface, which can be unergonomic for complex use cases and which does not support plugins. You will need to write JavaScript or Go code and use esbuild's API to use plugins.

#Download a build

Although the precompiled native executables are hosted using npm, you don't actually need npm installed to download them. The npm package registry is a normal HTTP server and packages are normal gzipped tar files.

Here is an example of downloading a binary executable directly:

curl -O https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.21.tgztar xf ./esbuild-darwin-64-0.14.21.tgz./package/bin/esbuildUsage:
  esbuild [options] [entry points]

...

The native executable in the esbuild-darwin-64 package is for the macOS operating system and the x86-64 architecture. As of writing, this is the full list of native executable packages for the platforms esbuild supports:

Package nameOSArchitectureDownload
esbuild-android-arm64androidarm64 
esbuild-darwin-64darwinx64 
esbuild-darwin-arm64darwinarm64 
esbuild-freebsd-64freebsdx64 
esbuild-freebsd-arm64freebsdarm64 
esbuild-linux-32linuxia32 
esbuild-linux-64linuxx64 
esbuild-linux-armlinuxarm 
esbuild-linux-arm64linuxarm64 
esbuild-linux-mips64lelinuxmips64el2 
esbuild-linux-ppc64lelinuxppc64 
esbuild-linux-riscv64linuxriscv642 
esbuild-linux-s390xlinuxs390x 
esbuild-netbsd-64netbsd1x64 
esbuild-openbsd-64openbsdx64 
esbuild-sunos-64sunosx64 
esbuild-windows-32win32ia32 
esbuild-windows-64win32x64 
esbuild-windows-arm64win32arm64 

Why this is not recommended: This relies on internal implementation details of esbuild's native executable installer. These details may change at some point, in which case this approach will no longer work for new esbuild versions. This is only a minor drawback though since the approach should still work forever for existing esbuild versions since packages published to npm are immutable. An additional drawback is that you cannot use plugins with the native version.

Why?

Our current build tools for the web are 10-100x slower than they could be:

The main goal of the esbuild bundler project is to bring about a new era of build tool performance, and create an easy-to-use modern bundler along the way.

Major features:

Check out the getting started instructions if you want to give esbuild a try.

Download Details:
Author: evanw
Source Code: https://github.com/evanw/esbuild
License: MIT License

#react #javascript #esbuild

Lyda  White

Lyda White

1628189100

How to Image Uploader with Preview || Html CSS JavaScript

Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding

#html #css #javascript 

Saurabh Kumar

Saurabh Kumar

1671267560

Personal Portfolio Website Using Html Css and Javascript

#HTML #CSS #JavaScript 

In this tutorial we are going to make a personal Portfolio in this website there are six section Home, About, Services,Portfolio , Skills, and Contact the main features of this is dark/light mode function

 ∎ Download Source codes - https://www.thesimplifieddev.com/make-a-personal-portfolio-website

Features : -

  • Fully Responsive 
  • Dark mode/light mode
  • Browser compatibility
  • Social Media Icon
  • and many more

#css  #html  #javascript 

 

 

Code  JS

Code JS

1642043752

Create a Dark/Light Theme Transition Effect with CSS and JavaScript

In this tutorial, we are creating a Dark/Light Theme Toggle effect using vanilla #CSS and #JavaScript. This is a perfect component to be used on a website that has a Dark theme mode.

Source Code: https://codepen.io/FlorinPop17/pen/XWWZYYG 

Subscribe: https://www.youtube.com/c/FlorinPop/featured 

#html #css #javascript 

code savvy

code savvy

1630506330

Product landing page using HTML CSS & JavaScript | web design

Knowledge

This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform  those powerful animations we use the GSAP a JavaScript animation library for work done.

In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.

Don't forget to join the channel for more videos like this. Code Savvy

📁 Assets 
Icons : https://fontawesome.com/
Fonts : https://fonts.google.com/
GitHub : https://github.com/ananikets18
GSAP : https://greensock.com/gsap/

Outline ⏱

0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 – Reset HTML
02:21 – Left Container HTML
03:41 – Wrapper
14:58 – Bottom Shoe Nav
26:23 – Right Container HTML
33:10 – Product Size
35:49 – Reviews
41:11 – GSAP Animations

Click to Watch Full tutorial on YOUTUBE

#html  #css  #javascript  #web-development #html5 

#html #css #tailwindcss #javascript