No app bundler needed for your next project?

栏目: IT技术 · 发布时间: 4年前

内容简介：The browsers are rolling out updates to support more of the latest features of JavaScript defined byUnsurprisingly,

The browsers are rolling out updates to support more of the latest features of JavaScript defined by ECMAScript technical committee 39 . Have you thought about how much can we write today without using an app bundler like Webpack , Rollup.js or Parcel ? Below I will go through a few JavaScript features we can use in today’s modern web browser when building a new web app.

No app bundler needed for your next project? Photo by Tetiana Shadrina on Unsplash

Unsurprisingly, Internet Explorer doesn’t support many of these features, however, Edge seems to do a decent job.

The idea behind this post is to begin to consider whether or not a bundler is really needed, because it has become the norm to use one for lots of JS apps. A bundler is an additional dependency which you may need to configure quite extensively to get the output you need, adding significant complexity before building any app features. I’m not saying we don’t need them, but it could be possible to start a project without a bundler, and add it in at a later stage when you find the need. Perhaps you have a small enough project where it’s not needed: perhaps a Chrome extension for example.

New language features added in the browser

Below are a few new JavaScript features which will work in most modern browsers.

let and const for declaring variables and destructuring assignment .
Template literals are string literals allowing embedded expressions and can be multiline. string literal ${expression}
Rest/spread operator ... take remaining values (rest) or apply key/values (spread) to an object or array.
Arrow function expressions () => {} , is a more compact syntax than the normal function expression and does not have its own this but instead it uses the enclosing lexical scope.

Examples

const letters = ["a", "b", "c", "d", "e"];
const starter = {
  hello: "hello",
  world: "world"
};

const [a, b, ...rest] = letters;
console.log(a, b); // => a b
console.log(rest); // => ["c", "d", "e"]
const spread = rest;
const numsLetters = [1, 2, ...spread];
console.log(numsLetters); // => [1, 2, "c", "d", "e"]

const { hello } = starter;
console.log(hello); // => hello

let count = 1;
count += 5;
console.log(count) // => 6

console.log(`Template literals ${starter.world}`) // => Template literals world

const arrowLog = (message) => console.log(`->: ${message}`)
arrowLog("point"); // => ->: point

Async/Await and making HTTP requests

You will be pleased to know that async/await is supported in the browser which will make using native fetch API even easier to work with.

async function getRecipe() {
  const res = await fetch(
    "https://api.github.com/search/repositories?q=tetris+language:assembly&sort=starsℴ=desc"
  );
  const data = await res.json();
  console.log(data);
  return data;
}

JavaScript modules and organising your app files

With most applications you will want to separate your app into modules. Typically you will create a new file which will export an object or function that can be imported in another file. This means it would need to support a module system.

Modern browsers do support ECMAScript modules by adding a script tag with the type="module" and here are some points to note about this approach. See module browser support .

Each module has its own scope which is not the global one
Strict mode is always ‘on’, even when “use strict” directive is not provided
The module may import other modules using import directive
The module may export bindings using export

Another interesting attribute of a module script is it behaves like a defer ed script, in that is will not block the parsing of the HTML and execute after parsing has completed. In the example below you can see the script tag is in the head but our imported module will reference the div tag further along.

Example use of module script tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

// index.js
import { startApp } from "./todo-app.js";

startApp();

// todo-app.js
export function startApp() {
  const appBox = document.getElementById("app");

  appBox.innerHTML += "I was imported";
}

It is also possible to do an inline import, see below:

<script type="module">
  import { startApp } from "./todo-app.js";

  startApp();
</script>

Read more details about module script tag here.

Potentially you could have a small project or start a new one without the need of a bundler. If you decide to not use a bundler, I’d like to hear what challenges you faced and what you tried to do to solve them? Let me know on, or in the comments below.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

No app bundler needed for your next project?

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

The Practice of Programming

Brian W. Kernighan、Rob Pike / Addison-Wesley / 1999-2-14 / USD 49.99

With the same insight and authority that made their book The Unix Programming Environment a classic, Brian Kernighan and Rob Pike have written The Practice of Programming to help make individual progr......一起来看看《The Practice of Programming》这本书的介绍吧!

码农工具