随着公司前端项目的增多, 大家会发现各个项目中很多资源都是是大同小异的，这就引发了一个话题，如何跨项目共用前端资源, 这里的资源泛指前端涉及到的所有静态资源, 常见的有 HTML/CSS/JS/图片等等.
所谓共用前端资源, 就是将公共的前端资源提取出来, 例如公共样式/公共逻辑/公共组件/公共图片资源等等, 让多个项目来引用, 避免复制多份, 避免重复开发, 统一管理和维护。只要更新公共资源,其他引用的项目就可以同步更新，提升开发效率，降低开发成本。
自研方案 npm 和 Webpack
想共用前端资源, 必须先将公用的前端资源以包的形式统一地管理起来, 形成一个公共仓库, 在项目中声明依赖的前端资源包, 通过工具来下载依赖的具体资源文件。
开发时使用模块打包器分析出具体的依赖文件, 打包出项目依赖的所有前端资源。
因此我们需要一个包管理器和模块打包器, 即可实现梦寐以求地共用前端资源。
包管理器: npm
npm is the package manager for JavaScript manage dependencies in your projects
管理项目级别的依赖, 必要时搭建一套 npm 私服
模块打包器: Webpack
Webpack is a module bundler for modern JavaScript applications it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles - often only one - to be loaded by the browser.
构建工具分析并打包依赖, 现在你可以放心大胆地修改和删除项目历史遗留的静态资源文件了
任何资源都可以视为一种依赖, 在构建时分析出资源的引用关系
如果某个资源是僵尸资源, 删除后不会引发构建失败, 因为已经没有任何文件引用(依赖)它了
在没有构建工具分析依赖的年代,你只能通过全局搜索的方式来确定一个文件还有没有用,但可能还是没有办法下达删除的决定(万一其他项目引用了呢?)
接下来, 共用前端资源的关键就是将公共的模块发布到 npm 里面, 然后就是在各个项目声明依赖实际使用了。
实际使用的方式就落在了: 如何通过 Webpack 在 HTML/CSS/JS 文件中引用 npm 模块(即 node_modules 文件夹), 或者是 npm 模块中的文件
HTML:
复制代码
CSS:
/* 导入 npm 模块: normalize.css, 会自动去找 main 文件 */
@import url(~normalize.css);
.test-npm-res {
/* 引用 npm 模块 ionicons 中的文件 */
background-image: url(~ionicons/dist/svg/ios-partly-sunny-outline.svg);
}
复制代码
JS:
// 导入 npm 模块 ionicons 中的文件
import svg from 'ionicons/dist/svg/ios-sunny-outline.svg';
复制代码
示例
我们只需要关注使用的模块, 不再需要关注模块的依赖了
共用静态资源文件: 在各个项目中引用公共的公司 Logo 图片
将公共静态资源在 npm 上发布为一个 company-common-res 的模块包