rollup.js

code splitting

dynamically import

动态 import 自动触发 分包

  1. // src/main.js
  2. export default function () {
  3.   import('./foo.js').then(({ default: foo }) => console.log(foo));
  4. }

dev

alias -> 简略引入

alias 可以实现 @ -> src/components/index 类似的功能，但是从 index 的直接引入会导致单一测试场景，或按需引入场景的额外引入，造成编译过慢。需要 同时配置 tsconfig 与 webpack alias 进行简略引入 的实现。
但由于各方需要的内容不同，dev 中的 alias 需要 eslint，tsconfig，jest 环境都做配置。

tsconfig

dsdocs代表 引入index，在上方添加带 /* 的通配引入，实现简略的精确引入 

  1.  "paths": {
  2.       "dsdocs/*": ["./src/components/*/index"],
  3.       "dsdocs": ["./src/index.ts"]
  4.  },

可实现类似的效果
image.png
dsdocs 为快捷引入，但会引入多余的 index 中的内容，dsdocs/Table 为精确引入。

eslint/webpack

https://webpack.js.org/configuration/resolve/
由于 eslint 相当于读取的 webpack 配置，所以是 webpack 的 alias 判断。
$ 后缀做精准匹配，代表完整的 path string，直接替换，不带后缀则为 path 的部分 string，部分替换 path：

  1. module.exports = {
  2.   resolve: {
  3.     alias: {
  4.       dsdocs: path.resolve(__dirname, './src/components/'),
  5.       dsdocs$: path.resolve(__dirname, './src'),
  6.     },
  7.   },
  8. };

jest

https://www.xspdf.com/resolution/50171412.html
jest 也有自己的 alias 适配内容，为 moduleNameMapper 配置。
与 webpack 类似，实现精准匹配替换，与部分匹配替换：

  1. module.exports = {
  2.   moduleNameMapper: {
  3.     'dsdocs/(.*)$': '<rootDir>/src/components/$1',
  4.     dsdocs: '<rootDir>/src/index.ts',
  5.   },
  6. }

Eslint

no-extraneous-dependencies

设置部分文件中的 文件引入 只需在 devDependencies 中存在，不需要在 dependencies 中存在

  1. 'import/no-extraneous-dependencies': [
  2.       'error',
  3.       {
  4.         devDependencies: ['**/__test__/*', '**/demo/*'],
  5.       },
  6.  ],

https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-extraneous-dependencies.md
以及还可通过 core-modules 来设置一些 external 的引入：
https://github.com/import-js/eslint-plugin-import#importcore-modules