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.


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

查看所有标签

猜你喜欢:

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

创新者

创新者

[美] 沃尔特·艾萨克森 / 关嘉伟、牛小婧 / 中信出版社 / 2017-4 / 88.00元

《创新者》是沃尔特·艾萨克森继全球畅销书《史蒂夫·乔布斯传》之后的又一部力作,不仅讲述了计算机和互联网从无到有的发展历程,为我们 生动地刻画出数字时代的创新者群像,还深度挖掘互联网的精神内核,解读了“诗意科学”这个重大主题。 在近200年的数字化进程中群星闪耀,艾萨克森从第一个计算机程序的创造者、浪漫主义诗人拜伦之女埃达•洛夫莱斯伯爵夫人说起,细数了这一群将科学与人文融合的创新者,他们包括第......一起来看看 《创新者》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具