首页
前端开发
Webpack
ModuleScopePlugin模块作用域限制器

ModuleScopePlugin模块作用域限制器

0 次浏览 0 条评论
zip
zip

Webpack 里的模块查找范围限制器——ModuleScopePlugin，用起来还挺香的，尤其是在用 React 开发的时候。它的核心作用就是：不让你随便从项目外面乱引模块，所有东西都得老老实实从src目录找起，规矩清晰，代码也更好维护。

模块作用域的管控说白了，就是防止你从项目的边边角角随意 import 一些文件，导致依赖混乱、调试麻烦。比如你有个组件藏在根目录，结果从src里面直接引，Webpack 一脸懵逼还会报错。用了ModuleScopePlugin，这些问题都能拦下来。

配置也不麻烦，只需要装个react-dev-utils： 

npm install --save-dev react-dev-utils
在你的webpack.config.js里加点料： 
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');


plugins: [
  new ModuleScopePlugin(
    path.resolve(__dirname, 'src'),
    [path.resolve(__dirname, 'node_modules')]
  )
]

React 项目里默认就用上了，是用 Create React App 起手的时候。它会阻止你去src目录外找文件，比如你试图从public目录引个 JS，那 Webpack 就会直接拦你。嗯，虽然有点限制，但长远来看能少掉不少坑。

不过也不是没有例外。有时候你确实有自定义需求，比如引全局样式、配置外部 UI 库啥的。这种情况就得自己调整resolve.modules或者改插件参数了。千万别一上来就禁用插件，出了问题你真不好找原因。

如果你在做中大型 React 项目，挺建议你把这个插件加上。代码层次分明，后期也不容易踩坑。如果你喜欢灵活一点的模块管理方式，那就记得在配置里给它留条后路。

zip 文件大小：2.79KB