为什么会突然用到webpack这个管理特性呢?项目某个页面需要引入N张demo图片。即资源的批量引入:如果要引入10+个以上的图片资源,就需要写10+个如下的引入代码:import XXX from 'relative/path/assets/imgs/xxx';,那如果再多一点的静态资源需要引入呢?这时候require.context就派上了用场。
官方文档的介绍先放在这里,可小觑一下,了解使用姿势。
话不多说,针对上面的场景,我们上一下代码吧。场景需要我们引入某个指定文件夹下的所有webp格式的图片,在单击demo1的时候展示demo1下的x张案例图,在单击demoX的时候展示demoX下的x张案例图。
// 通过require.context的方式引入指定的路径下匹配到的模块引用
const demoImgsContext = require.context('@src/assets/imgs/demo', false, /\.webp$/);
...
// 使用姿势
trigger(type) {
this.demoImgs = Arry.from({length: config.type}, (key, value) => value + 1)
.map(index => demoImgsContext(`./${type}_demo${index}.webp`));
}
举一反三的场景还有需要的么?比如vuex引入多个module的store。也可以使用这个方法。
// 添加module文件是,文件命请按照module_XXX的方式命名
// 自动引入module文件夹下的js文件
const mutationContext = require.context('./module', false, /.*\.js/);
const modules = mutationContext.keys().reduce((prev, cur) => {
// 排除module_root文件
const matches = cur.match(/module_(?!.*root)(\w+)\.js/);
const key = matches && matches[1];
key && (prev[key] = mutationContext(cur).default);
return prev;
}, {});
看下打包后的dist目录下,我们的静态图片案例chunk这个部分的代码是啥样的。trigger方法中引用模块资源的代码如下,对y方法进行调用,传入了一个资源的路径。
map(function (e) {
return y("./".concat(t, "_demo").concat(e, ".webp"))
})
那y方法是什么呢?顺藤摸瓜,继续看下打包后的代码。
y = a("ae36");
y方法是某个模块的export,继续查看这个id下的模块代码:
ae36: function (t, e, a) {
// 此处是一个map映射,key值和真正的资源id的映射
var i = {
"./a_module_demo1.webp": "6085",
"./a_module_demo2.webp": "fd3b",
"./b_module_demo1.webp": "cbf6",
"./b_module_demo2.webp": "220e",
"./c_module_demo1.webp": "273e",
"./c_module_demo2.webp": "5a5e",
"./d_module_demo1.webp": "75b0",
"./d_module_demo2.webp": "2d3e"
};
// 此处根据module的id值,真正require一个资源
function r(t) {
var e = o(t);
return a(e)
}
function o(t) {
var e = i[t];
if (!(e + 1)) {
var a = new Error("Cannot find module '" + t + "'");
throw a.code = "MODULE_NOT_FOUND", a
}
return e
}
r.keys = function () {
return Object.keys(i)
}, r.resolve = o, t.exports = r, r.id = "ae36"
},
"6085","fd3b"等map映射的value值可想而知,是真正的资源id值,其对应的模块映射如下:
6085: function (t, e) {
t.exports =
"//${你配置的项目publicPath}/img/1_module_demo1.ed6db768.webp"
},
当用户触发trigger方法时,根据type和index指定的值,require.context存储的模块资源引用会根据key值找到真正的资源模块,进行require,浏览器会帮助我们下载相应的资源,做到了批量引入后按需加载的想法。
require 和 import 区别:遵循的模块化规范不一样,出现的时间不同。Require是CommonJS的语法,CommonJS的模块是对象,输入时必须查找对象属性。
需求:如何components里面的index.vue怎样能把assets里面的图片拿出来。 1.在img标签里面直接写上路径,2.利用数组保存再循环输出
RequireJS是一个工具库,主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块,实现异步或动态加载,从而提高代码的性能和可维护性。它的模块管理遵守AMD规范,模块与模块之间可以互相依赖,当然可能会有人会想,模块之间的依赖
Node应用由模块组成,采用CommonJS模块规范。根据这个规范,每个文件就是一个模块,有自己的作用域。在这些文件里面定义的变量、函数、类,都是私有的,对外不可见,因此规避掉了作用域污染。
require 的运行机制和缓存策略你了解吗?require 加载模块的是同步还是异步?谈谈你的理解exports 和 module.exports 的区别是什么?require 加载模块的时候加载的究竟是什么?
当前端应用越来越复杂时,我们想要将代码分割成不同的模块,便于复用、按需加载等。require 和 import 分别是不同模块化规范下引入模块的语句,下文将介绍这两种方式的不同之处。
在项目中用 require(./Download.vue) 引入一个组件的时缺少.default 会报错:Failed to mount component: template or render function not defined
我们常说node并不是一门新的编程语言,他只是javascript的运行时,运行时你可以简单地理解为运行javascript的环境。在大多数情况下我们会在浏览器中去运行javascript,有了node的出现
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境。早期的 Node.js 采用的是 CommonJS 模块规范,从 Node v13.2.0 版本开始正式支持 ES Modules 特性
人们常说node并不是一门新的编程语言,他只是javascript的运行时,运行时你可以简单地理解为运行javascript的环境。在大多数情况下会在浏览器中去运行javascript,有了node的出现,可以在node中去运行javascript
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!