Critical dependency: the request of a dependency is an expression

之前在 《前端模块化方案：前端模块化/插件化异步加载方案探索》中有提到过：

浏览器加载 ES6 模块，也使用<script>标签，但是要加入type="module"属性。

<script type="module" src="./foo.js"></script>

其实这个并没有什么好书的。我想说的是在代码中异步加载模块。实现cmd的效果。比如：

app/es6-file.js:

export class q {
export let counter = 3;
export function incCounter() {
  counter++;
}

浏览器加载：

<script>
  import { counter, incCounter } from './lib';
   console.log(counter); // 3
  incCounter();
  console.log(counter); // 4
</script>

ES6模块定义名为export，提供一个静态构造函数访问器。

更多的推荐阅读

• ES6模块加载实现，以及异步加载 https://juejin.cn/post/7002007274877091870

• 万岁，浏览器原生支持ES6 export和import模块啦！ https://www.zhangxinxu.com/wordpress/2018/08/browser-native-es6-export-import-module/

但是，直接用es6 在webpack 项目中，就会报这个：

Critical dependency: the request of a dependency is an expression

谷歌搜索了下，很多人说是这个：

原因在于： require用于引入模块、 JSON、或本地文件，但是不支持直接传入变量。
解决方法：通过 ES6 字符串模板 将变量转换为字符串即可。

let img = '@/assets/images/head.png';
// require(img); 改为
require(`${img}`)

https://blog.csdn.net/wzp20092009/article/details/109817744

其实不止如此，wepback es6 异步加载，在webpack 里面就会报这个错误，

export const dashBoardSourcePluginLoad = async (path: string, build_in: boolean): Promise<any> => {
  if (!path) {
    return Promise.reject('不存在的组件路径');
  }

  if (build_in) {
    const builtIn = DashboardBuildIn[path];
    if (!builtIn) {
      return Promise.reject('不存在该组件');
    }
    if (typeof builtIn === 'function') {
      return await builtIn();
    }
    return Promise.resolve(builtIn);
  }
  // return await import(path); 改为：
  return await import(`${path}`);
};

这样就是不会有警告了

转载本站文章《Critical dependency: the request of a dependency is an expression》,
请注明出处：https://www.zhoulujun.cn/html/tools/Bundler/webpack/2022_0627_8857.html