tp做网站,百度不收录wordpress,国内网站备案要多久,hao123上网从这里开始带表达式的 require 语句 如果你的 require参数含有表达式(expressions)#xff0c;会创建一个上下文(context)#xff0c;因为在编译时(compile time)并不清楚具体是哪一个模块被导入 require(./template/ name .ejs);webpack 解析 require() 的…带表达式的 require 语句 如果你的 require参数含有表达式(expressions)会创建一个上下文(context)因为在编译时(compile time)并不清楚具体是哪一个模块被导入 require(./template/ name .ejs);webpack 解析 require() 的调用提取出来如下这些信息
Directory: ./template
Regular expression: /^.*\.ejs$/则会返回template目录下的所有后缀为.ejs模块的引用包含子目录。
require.context
可以使用 require.context() 方法来创建自己的模块上下文这个方法有 3 个参数
要搜索的文件夹目录是否还应该搜索它的子目录以及一个匹配文件的正则表达式。
require.context(directory, useSubdirectories false, regExp /^\.\//)require.context(./test, false, /\.test\.js$/);//创建了一个包含了 test 文件夹不包含子目录下面的、所有文件名以 .test.js 结尾的、能被 require 请求到的文件的上下文。require.context(../, true, /\.stories\.js$/);//创建了一个包含了父级文件夹包含子目录下面所有文件名以 .stories.js 结尾的文件的上下文。require.context模块导出返回一个require函数这个函数可以接收一个参数request 函数–这里的 request 应该是指在 require() 语句中的表达式 导出的方法有 3 个属性 resolve, keys, id。
resolve 是一个函数它返回请求被解析后得到的模块 id。keys 也是一个函数它返回一个数组由所有可能被上下文模块处理的请求组成。id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到
Vue 全局组件 module.exports.install function (Vue) {/*所有在./components目录下的.vue组件自动注册为全局组件以mv-***/mv-***为组件标签名***是组件的.name没有name的时候是组件的文件名*/const requireAll context context.keys().map(context);const component require.context(./components, false, /\.vue$/);// const directive require.context(./directives, false, /\.js$/);requireAll(component).forEach((item) {const name (item.name || /(\S \/)(\S )\.vue/.exec(item.hotID)[2]).toLowerCase();Vue.component(mv-${name}, item);});};/**
* The file enables /store/index.js to import all vuex modules
* in a one-shot manner. There should not be any reason to edit this file.
*/const files require.context(./modules, false, /\.js$/)
console.log(------------)
console.log(files.keys())
console.log(------------)
const modules {}files.keys().forEach(key { modules[key.replace(/(\.\/|\.js)/g, )] files(key).default
})console.log(------------)
console.log(modules)
console.log(------------)
export default modules要引入svg下面所有的svg文件 在该文件icons目录下新建一个js文件index.js 写如下代码
let requireAll requireContext requireContext.keys().map(requireContext)
let req require.context(./svg, false, /\.svg$/)
requireAll(req) Vue 全局组件
const requireAll context context.keys().map(context);const component require.context(./components, false, /\.vue$/); // false 不遍历子目录true遍历子目录requireAll(component).forEach(({default:item}) {console.log(item)Vue.component(wb-${item.name}, item);
});首字母大写
Object.keys(components).forEach((key) {var name key.replace(/(\w)/, (v) v.toUpperCase()) //首字母大写Vue.component(v${name}, components[key])
})利用require.context遍历目录所有图片
G:\Code\Vue\vue-global-component\src\assetstree /f
卷 其它 的文件夹 PATH 列表
卷序列号为 1081-0973
G:.
│ logo.png
└─kittenskitten1.jpgkitten2.jpgkitten3.jpgkitten4.jpg加载所有的图片
templatediv idappimg src/assets/logo.pngli v-foritem in imagesh3Image: {{ item }}/h3img :srcimgUrl(item)/li/div
/templatescriptvar imagesContext require.context(/assets/kittens/, false, /\.jpg$/);console.log(imagesContext)console.log(imagesContext(./kitten1.jpg))console.log(imagesContext.keys())export default {created: function() {this.images imagesContext.keys();},name: haha,data() {return {images: [],msg: Welcome to Your Vue.js App}},methods: {imgUrl: function(path) {//console.log(Path: path);return imagesContext(path)}}}
/scriptstyle#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}h1,h2 {font-weight: normal;}ul {list-style-type: none;padding: 0;}li {display: inline-block;margin: 0 10px;}a {color: #42b983;}
/style更多专业前端知识请上
【猿2048】www.mk2048.com
