in-browser 和 built-time modules模块的区别

1 前言

博主最近在学习Single SPA，首先需要理解的是什么是 in-browser modules和 built-time modules

2 概述

直接的理解，in-browser modules 指在浏览器的模块， built-time modules指构建时的模块，其实大概也能理解一些，具体的解释如下：

1. in-browser modules 在运行时向浏览器请求的模块，如下面代码中的import Vue from “vue”;在构建时不会向项目请求，而是运行时
2. built-time modules 在项目构建时向项目请求的模块，如下面代码中的import foo from “./foo.js”;在构建时会根据路径找到并且拿到结果转换为var foo = “this is built-time modules”;

main.js

import Vue from "vue";
// 这是 in browser modules
import foo from "./foo.js";
// 这是 built-time modules
new Vue();

console.log("foo is", foo);

foo.js

export default test = "this is built-time modules";

经过webpack 或者 rollup等打包工具打包后，import foo from “./foo.js”;将转化为类似var foo = “this is built-time modules”;这样的，如下
main.js

import Vue from "vue";
// 这是 in browser modules
var foo = "this is built-time modules";
// 这是 built-time modules
new Vue();

console.log("foo is", foo);