RequireJS

script type= text/javascript src= ../scripts/lib/require.js data-main= ../scripts/main.js /script 首页index.html只需要引入requireJs库文件，并且指明入口函数main.js(data-main),它一般用来对requirejs进行配置，
script type=text/javascript src=../scripts/lib/require.js data-main=../scripts/main.js /script
首页index.html只需要引入requireJs库文件，并且指明入口函数main.js(data-main),它一般用来对requirejs进行配置，
main.js内容如下:main.js这个文件做的事情就是:由requirejs异步载入所有文件

require.config({
    paths:{
        //一些库文件
        jquery: //cdn.staticfile.org/jquery/1.10.2/jquery.min,
        angular: //cdn.staticfile.org/angular.js/1.2.10/angular.min,
        angular-route: //cdn.staticfile.org/angular-ui-router/0.2.8/angular-ui-router.min,domReady: //cdn.staticfile.org/require-domReady/2.0.1/domReady.min,
        //js文件
        bootstrap: "../scripts/bootstrap",
        app: "../scripts/app",
        router: "../scripts/router"
        .....以及其他的js文件，这里省略
    },
    shim:{
        angular:{
            exports:angular
        },
        angular-route:{
            deps:[angular],
            exports: angular-route
        }
    },
    deps:[bootstrap],
    urlArgs: "bust=" + (new Date()).getTime()  //防止读取缓存，调试用
});



requirejs一共提供了两个全局变量：
1. requirejs/require: 用来配置requirejs及载入入口模块。如果其中一个命名被其它库使用了，我们可以用另一个
声明模块及js文件地址



2. define: requirejs的方式来定义模块：
define([], function() {
  return {
    hello: function() {
      alert("hello, app~");
    }
  }
});


普通的方式定义了一个函数，我们能在requirejs里使用它吗？

暴露单个变量exports:

可以把某个非requirejs方式的代码中的某一个全局变量暴露出去，当作该模块以引用。
shim: {
    hello: { exports: hello }
}


暴露多个变量：init

这时就不能再用 exports 了，必须换成 init 函数：

shim: {
    hello: {
      init: function() {
        return {
          hello1: hello1,
          hello2: hello2
        }
      }
    }
  }

当exports与init同时存在的时候， exports将被忽略。



有主的模块(不能重新起模块名)
它们声明为有主的，那么所有的模块只能使用同一个名字引用它们，这样系统就只会载入它们一次。
声明了一个确定的模块名。define(jquery, [], function() { ... });



无主的模块
define([...], function() {
  ...
});

我们可以在 requirejs.config 里，使用任意一个模块名来引用它


你真的了解ESM吗？ 模块兼容性 推荐阅读指数⭐️⭐️⭐️ ESM是个啥 推荐阅读指数⭐️⭐️⭐️⭐️ 在浏览器中使用ESM 推荐阅读指数⭐️⭐️⭐️⭐️ 模块指定符 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ 默认情况下，模块是defer的 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ 动态导入 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ import.meta 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ 优化建议 推荐阅读指数⭐️⭐️⭐️ 网站中使用ESM 推荐阅读指数⭐️⭐️⭐️
esbuild + swc 能有多快？ 前端工具层出不穷，之前有常用的打包工具webpack，现在有了速度更快的vite。 vite的开发模式是基于esBuild编译的,打包又是基于rollup,启动项目是很快的。