vue-cli4.x搭建的vue项目引用json文件,因为一些原因json路径不固定,就想到使用变量接收路径,然后require变量但是不行:
let url = "./data/test.json",
json = require(url);
console.log(json);
用[]解析变量也不行
let url = "./data/test.json",
json = require([url]);
console.log(json);
使用模版字符串就可以引入
let url = "./data/test.json",
json = require(`${url}`);
console.log(json);
使用变量加空字符串也可以
let url = "./data/test.json",
json = require(url + "");
console.log(json);
各位大佬们这是为什么?
解答:
这不是 vue 项目的问题,也不是 引入 json 才会有的问题,而是因为 webpack 本身不支持 require 变量名的。
webpack require 为什么不支持变量呢?这是因为 webpack 是一个构建工具,而他的核心思想是一切都是模块,根据模块的依赖关系进行打包,而这些模块必须要是本地资源,既然是本地资源,就肯定是确定的资源,而没有必要使用未知的变量资源。
回到楼主的问题,为什么只用变量名就不行,而用字符串模板或变量名+空字符串就行:
let url = './data/test.json'
const json1 = require(url);
const json2 = require(`${url}`);
const json3 = require(url + '');
如上,json1 会报错,而 json2 和 json3 确能正常引入为什么呢?
webpack 只是一个打包工具,他最终输出的代码还是要在浏览器上运行的,所以可以尝试从浏览器上面的代码来分析一下到底怎么回事。我们在浏览器 app.js 文件中看到以上代码被编译成了如下:
"use strict";
__webpack_require__.r(__webpack_exports__);
var url = './data/test.json';
var json1 = __webpack_require__("./src sync recursive")(url);
var json2 = __webpack_require__("./src sync recursive ^.*$")("".concat(url));
var json3 = __webpack_require__("./src sync recursive ^.*$")(url + "");
console.log(json1, json2, json3);
可以看到, require 都被转换成 ___webpack_require__ 了,但是 json1 和 json2/json3 有个明显的不同,json1 的第一个参数是 ./src sync recursive ,而 json2/json3 的第一个参数都是 ./src sync recursive ^.*$
这两个到底是什么东西呢?我也不知道,所以在 app.js 文件中搜索一下,发现如果请求参数是 ./src sync recursive 则会调用下面的代码,他的结果是抛出一个 cannot find module 错误:
function webpackEmptyContext(req) {
var e = new Error("Cannot find module '" + req + "'");
e.code = 'MODULE_NOT_FOUND';
throw e;
}
webpackEmptyContext.keys = function() { return []; };
webpackEmptyContext.resolve = webpackEmptyContext;
module.exports = webpackEmptyContext;
webpackEmptyContext.id = "./src sync recursive";
而如果是 ./src sync ^.*$ ,则会执行以下代码,他会从 map 映射表中找到对应的资源的,如果找到,就正常返回,如果 map 中不存在也会报错:
var map = {
"./App": "./src/App.vue",
"./App.vue": "./src/App.vue",
"./components/HelloWorld": "./src/components/HelloWorld.vue",
"./components/HelloWorld.vue": "./src/components/HelloWorld.vue",
"./data/test": "./src/data/test.json",
"./data/test.json": "./src/data/test.json",
"./main": "./src/main.js",
"./main.js": "./src/main.js",
"./webpack": "./src/webpack.js",
"./webpack.js": "./src/webpack.js"
};
function webpackContext(req) {
var id = webpackContextResolve(req);
return __webpack_require__(id);
}
webpackContextResolve(req) {
if(!__webpack_require__.o(map, req)) {
var e = new Error("Cannot find module '" + req + "'");
e.code = 'MODULE_NOT_FOUND';
throw e;
}
return map[req];
}
webpackContext.keys = function webpackContextKeys() {
return Object.keys(map);
};
到此,我们也大概明白了为什么 require“纯变量”不行,而 require 字符串模板或变量+空字符却可以了,这是因为 webpack 在编译代码的时候处理的不一样。
另外:
还从来没有这么引用过,建议利用 node 自带的变量 __dirname 来实现拼接路径
const resolve = dir => path.join(__dirname, dir);
使用 webpack 的 require.context API,文档地址:require.context。
它的作用是生成一个特定的上下文,用于自定义引入模块。通常在遇到需要从一个文件夹引入很多模块的时候,通过该 API 自动引入该文件夹下的模块,避免多次的显式引用。
// 显式引入
import ComponentA from './components/ComponentA.js'
import ComponentB from './components/ComponentB.js'
import ComponentC from './components/ComponentC.js'
// 自动引入
const ctx = require.context('./components', false, /\.js$/)