前端工程化知識(shí)點(diǎn)梳理

// 源代碼
let a: string = 1;
// 目標(biāo)代碼
var a = 1;

import { parse } from '@babel/parser';
const source = `let a: string = 1;`;

enum ParseSourceTypeEnum {
  Module = 'module',
  Script = 'script',
  Unambiguous = 'unambiguous',
}

enum ParsePluginEnum {
  Flow = 'flow',
  FlowComments = 'flowComments',
  TypeScript = 'typescript',
  Jsx = 'jsx',
  V8intrinsic = 'v8intrinsic',
}

// 解析（Parser）階段
const ast = parse(source, {
  // 嚴(yán)格模式下解析并且允許模塊定義
  sourceType: ParseSourceTypeEnum.Module,
  // 支持解析 TypeScript 語法（注意，這里只是支持解析，并不是轉(zhuǎn)換 TypeScript）
  plugins: [ParsePluginEnum.TypeScript],
});

import { parse } from '@babel/parser';
import traverse from '@babel/traverse';

enum ParseSourceTypeEnum {
  Module = 'module',
  Script = 'script',
  Unambiguous = 'unambiguous',
}

enum ParsePluginEnum {
  Flow = 'flow',
  FlowComments = 'flowComments',
  TypeScript = 'typescript',
  Jsx = 'jsx',
  V8intrinsic = 'v8intrinsic',
}

const source = `let a: string = 1;`;

// 解析（Parser）階段
const ast = parse(source, {
  // 嚴(yán)格模式下解析并且允許模塊定義
  sourceType: ParseSourceTypeEnum.Module,
  // 支持解析 TypeScript 語法（注意，這里只是可以解析，并不是轉(zhuǎn)換 TypeScript）
  plugins: [ParsePluginEnum.TypeScript],
});

// 轉(zhuǎn)換（Transform) 階段
traverse(ast, {
  // 訪問變量聲明標(biāo)識(shí)符
  VariableDeclaration(path) {
    // 將 const 和 let 轉(zhuǎn)換為 var
    path.node.kind = 'var';
  },
  // 訪問 TypeScript 類型聲明標(biāo)識(shí)符
  TSTypeAnnotation(path) {
    // 移除 TypeScript 的聲明類型
    path.remove();
  },
});

import { parse } from '@babel/parser';
import traverse from '@babel/traverse';
import generate from '@babel/generator';

enum ParseSourceTypeEnum {
  Module = 'module',
  Script = 'script',
  Unambiguous = 'unambiguous',
}

enum ParsePluginEnum {
  Flow = 'flow',
  FlowComments = 'flowComments',
  TypeScript = 'typescript',
  Jsx = 'jsx',
  V8intrinsic = 'v8intrinsic',
}
const source = `let a: string = 1;`;

// 解析（Parser）階段
const ast = parse(source, {
  // 嚴(yán)格模式下解析并且允許模塊定義
  sourceType: ParseSourceTypeEnum.Module,
  // 支持解析 TypeScript 語法（注意，這里只是可以解析，并不是轉(zhuǎn)換 TypeScript）
  plugins: [ParsePluginEnum.TypeScript],
});

// 轉(zhuǎn)換（Transform) 階段
traverse(ast, {
  // 訪問詞法規(guī)則
  VariableDeclaration(path) {
    path.node.kind = 'var';
  },
 
  // 訪問詞法規(guī)則
  TSTypeAnnotation(path) {
    // 移除 TypeScript 的聲明類型
    path.remove();
  },
});

// 生成（Generate）階段
const { code } = generate(ast);
// code:  var a = 1;
console.log('code: ', code);

// 編譯時(shí)：VS Code 鼠標(biāo) hover 到 b 時(shí)可以顯示出 b 的類型信息
import { b } from './b';

const a = 1;
// WARNING: 具有邏輯
if(a === 1) {
   // 編譯時(shí)：ESLint: Parsing error: 'import' and 'export' may only appear at the top level
   // 運(yùn)行時(shí)：SyntaxError: Unexpected token '{'
   // TIPS: 這里可以使用 import() 進(jìn)行動(dòng)態(tài)導(dǎo)入
   import { b } from './b';
}

const c = 'b';
// WARNING: 含有變量
// 編譯時(shí)：ESLint：Parsing error: Unexpected token `
// 運(yùn)行時(shí)：SyntaxError: Unexpected template string
import { d } from `./${c}`;

const a = 1;

if(a === 1) {
  // VS Code 鼠標(biāo) hover 到 b 時(shí)，無法顯示出 b 的類型信息
  const b = require('./b');
}

const c = 'b';
const d = require(`./${c}`);

// hello.js 
export function a() {
  console.log('a');
}

export function b() {
  console.log('b');
}

// index.js
// TIPS: Webpack 編譯入口文件
// 這里不引入 function b
import { a } from './hello';
console.log(a);

(()=>{"use strict";console.log((function(){console.log("a")}))})();

// hello.js
exports.a = function () {
  console.log('a');
};

exports.b = function () {
  console.log('b');
};

// index.js
// TIPS: Webpack 編譯入口文件
const { a } = require('./hello');
console.log(a);

(() => {
  var o = {
      418: (o, n) => {
        (n.a = function () {
          console.log('a');
        }),
          // function b 的代碼并沒有被去除
          (n.b = function () {
            console.log('b');
          });
      },
    },
    n = {};
  function r(t) {
    var e = n[t];
    if (void 0 !== e) return e.exports;
    var s = (n[t] = { exports: {} });
    return o[t](s, s.exports, r), s.exports;
  }
  (() => {
    const { a: o } = r(418);
    console.log(o);
  })();
})();

// hello.js
export let a = 1;

setTimeout(() => {
  a++;
}, 1000);


// index.js
import { a } from './hello.js';

setTimeout(() => {
  console.log(a); // 2
}, 2000);

// hello.js
exports.a = 1;

setTimeout(() => {
  exports.a++;
}, 1000);


// index.js
let { a } = require('./hello');

setTimeout(() => {
  console.log(a); // 1
}, 2000);

// hello.js
exports.a = {
  value: 1,
};

setTimeout(() => {
  exports.a.value++;
}, 1000);

// index.js
let { a } = require('./hello');

setTimeout(() => {
  console.log(a.value); // 2
}, 2000);

(() => {
  'use strict';
  let e = 1;
  setTimeout(() => {
    e++;
  }, 1e3),
    setTimeout(() => {
      console.log(e);
    }, 2e3);
})();

(() => {
  var e = {
      418: (e, t) => {
        // hello.js 中的模塊代碼
        (t.a = 1),
          setTimeout(() => {
            t.a++;
          }, 1e3);
      },
    },
    t = {};
  function o(r) {
    // 開辟模塊的緩存空間
    var s = t[r];
    // 獲取緩存信息，每次返回相同的模塊對(duì)象信息
    if (void 0 !== s) return s.exports;
    // 開辟模塊對(duì)象的內(nèi)存空間
    var a = (t[r] = { exports: {} });
    // 逗號(hào)運(yùn)算符，先運(yùn)行模塊代碼，賦值模塊對(duì)象的值，然后返回模塊信息
    // 由于緩存，模塊代碼只會(huì)被執(zhí)行一次
    return e[r](a, a.exports, o), a.exports;
  }
  (() => {
    // 淺拷貝
    let { a: e } = o(418);
    setTimeout(() => {
      // 盡管 t.a ++，這里輸出的仍然是 1
      console.log(e);
    }, 2e3);
  })();
})();

// hello.js
export function a() {
  console.log('a this: ', this);
}

// index.js
import { a } from './hello.js';

// a = 1;
// TypeError: Assignment to constant variable.
//    ...
//    at ModuleJob.run (internal/modules/esm/module_job.js:152:23)
//    at async Loader.import (internal/modules/esm/loader.js:166:24)
//    at async Object.loadESM (internal/process/esm_loader.js:68:5)
a = 1;

// hello.js

// 非嚴(yán)格模式
b = 1;

export function a() {
  console.log('a this: ', this);
}

// index.js
import { a } from './hello.js';

console.log('a: ', a);

ReferenceError: b is not defined
    at file:///Users/ziyi/Desktop/Gitlab/Explore/module-example/esmodule/hello.js:1:3
    at ModuleJob.run (internal/modules/esm/module_job.js:152:23)
    at async Loader.import (internal/modules/esm/loader.js:166:24)
    at async Object.loadESM (internal/process/esm_loader.js:68:5)

// https://github.com/nodejs/node/blob/master/lib/internal/modules/cjs/loader.js#L206
const wrapper = [
  '(function (exports, require, module, __filename, __dirname) { ',
  '\n});',
];

// https://github.com/nodejs/node/blob/3914354cd7ddc65774f13bbe435978217149793c/lib/internal/modules/cjs/loader.js#L997
Module.prototype.require = function(id) {
  validateString(id, 'id');
  if (id === '') {
    throw new ERR_INVALID_ARG_VALUE('id', id,
                                    'must be a non-empty string');
  }
  requireDepth++;
  try {
    return Module._load(id, this, /* isMain */ false);
  } finally {
    requireDepth--;
  }
};

// https://github.com/nodejs/node/blob/3914354cd7ddc65774f13bbe435978217149793c/lib/internal/modules/cjs/loader.js#L757

// Check the cache for the requested file.
// 1. If a module already exists in the cache: return its exports object.
// 2. If the module is native: call
//    `NativeModule.prototype.compileForPublicLoader()` and return the exports.
// 3. Otherwise, create a new module for the file and save it to the cache.
//    Then have it load  the file contents before returning its exports
//    object.
Module._load = function(request, parent, isMain) {
  let relResolveCacheIdentifier;
  if (parent) {
    debug('Module._load REQUEST %s parent: %s', request, parent.id);
    // Fast path for (lazy loaded) modules in the same directory. The indirect
    // caching is required to allow cache invalidation without changing the old
    // cache key names.
    relResolveCacheIdentifier = `${parent.path}\x00${request}`;
    const filename = relativeResolveCache[relResolveCacheIdentifier];
    // 有緩存，則走緩存
    if (filename !== undefined) {
      const cachedModule = Module._cache[filename];
      if (cachedModule !== undefined) {
        updateChildren(parent, cachedModule, true);
        if (!cachedModule.loaded)
          return getExportsForCircularRequire(cachedModule);
        return cachedModule.exports;
      }
      delete relativeResolveCache[relResolveCacheIdentifier];
    }
  }

  // `node:` 用于檢測核心模塊，例如 fs、path 等
  // Node.js 文檔：http://nodejs.cn/api/modules.html#modules_core_modules
  // 這里主要用于繞過 require 緩存
  const filename = Module._resolveFilename(request, parent, isMain);
  if (StringPrototypeStartsWith(filename, 'node:')) {
    // Slice 'node:' prefix
    const id = StringPrototypeSlice(filename, 5);

    const module = loadNativeModule(id, request);
    if (!module?.canBeRequiredByUsers) {
      throw new ERR_UNKNOWN_BUILTIN_MODULE(filename);
    }

    return module.exports;
  }
 
 // 緩存處理
  const cachedModule = Module._cache[filename];
  if (cachedModule !== undefined) {
    updateChildren(parent, cachedModule, true);
    if (!cachedModule.loaded) {
      const parseCachedModule = cjsParseCache.get(cachedModule);
      if (!parseCachedModule || parseCachedModule.loaded)
        return getExportsForCircularRequire(cachedModule);
      parseCachedModule.loaded = true;
    } else {
      return cachedModule.exports;
    }
  }

  const mod = loadNativeModule(filename, request);
  if (mod?.canBeRequiredByUsers) return mod.exports;

  // Don't call updateChildren(), Module constructor already does.
  const module = cachedModule || new Module(filename, parent);

  if (isMain) {
    process.mainModule = module;
    module.id = '.';
  }

  Module._cache[filename] = module;
  if (parent !== undefined) {
    relativeResolveCache[relResolveCacheIdentifier] = filename;
  }

  let threw = true;
  try {
    module.load(filename);
    threw = false;
  } finally {
    if (threw) {
      delete Module._cache[filename];
      if (parent !== undefined) {
        delete relativeResolveCache[relResolveCacheIdentifier];
        const children = parent?.children;
        if (ArrayIsArray(children)) {
          const index = ArrayPrototypeIndexOf(children, module);
          if (index !== -1) {
            ArrayPrototypeSplice(children, index, 1);
          }
        }
      }
    } else if (module.exports &&
               !isProxy(module.exports) &&
               ObjectGetPrototypeOf(module.exports) ===
                 CircularRequirePrototypeWarningProxy) {
      ObjectSetPrototypeOf(module.exports, ObjectPrototype);
    }
  }

  return module.exports;
};

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47

// hello.js
export function a() {
  console.log('this: ', this); // undefined
}

// index.js
import { a } from './hello.js';
a();

// hello.js
exports.a = function () {
  console.log('this: ', this);
};

// index.js
let { a } = require('./hello');
a();

const Module = require('module');
const originalRequire = Module.prototype.require;

Module.prototype.require = function(id){
  // 這里加入 path 的邏輯
  return originalRequire.apply(this, id);
};