高级前端必知知识点

1、 file 协议打开 报CORS错误

如果导出的 HTML 文件是通过 file 协议打开的，那么其中的 script 将不会运行，且报告下列错误。

Access to script at 'file:///foo/bar.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///foo/bar.js. (Reason: CORS request not http).

请查看 释因：CORS 请求不是 HTTP 请求 - HTTP | MDN 了解为什么会发生这种情况的更多信息。

你需要通过 http 协议访问该文件。

2、tsc打包构建typescript库项目为esm

打包命令(以下为typescript+scss+react项目实际使用命令)

rm -rf esm && tsc -p tsconfig.esm.json && tsc-alias && node-sass src -o esm && tsccss -o esm && copyfiles src/**/*.{png,gif,svg,css} esm -u 1

依赖包

tsc-alias "tsc-alias": "^1.8.2", 将 @转相对路径;
node-sass "node-sass": "^8.0.0", sass转css
tsccss "tsccss": "^1.0.0" import './a.module.scss' --> import './a.module.css'
copyfiles "copyfiles": "^2.4.1" 其他文件搬运

tsc配置文件

{
  "compilerOptions": {
    "baseUrl": "./",
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "outDir": "esm",
    "declaration": true,
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": [
    "src"
  ]
}

3、peerDependencies以及npm install或者 yarn的寻包安装逻辑；

例子：在项目P中使用了依赖包A，A中又依赖了b,c；那么项目P安装依赖包A的时候，进行了哪些寻包逻辑；

• 1、树形分析依赖包结构，由上而下寻包安装；

• 2、npm 和 yarn表现不一样 ；

• 3、yarn 约等于 npm i --legacy-peer-deps 约等于 npm7.0以前的版本；即不检查peerDependencies，只检测dependencies；

• 4、检测逻辑（npm(version>=7.0) i 检测dependencies和peerDependencies，yarn检测dependencies）：

  • 4.1）dependencies和peerDependencies相同的依赖的话，以dependencies为准；
  • 4.2）dependencies和peerDependencies依赖不相同的话，peerDependencies和dependencies都是会看依赖是否已经安装；
    • 4.2.1）最外层如果没有安装依赖库名一样的包，那么安装在项目node_modules的根目录；
    • 4.2.2）最外层如果已安装依赖库名一样的包，版本也一样那么忽略本次安装；
    • 4.2.3）最外层如果已安装依赖库名一样的包，但是版本不一样，那么就去安装到本安装包的node_modules；