标签：vue console log require js 导入 export 浅谈
我们知道 ,vue-cli 帮助我们初始化了 webpack 使得我们配置导入文件非常轻松 ,那么 ,它导入文件到底是怎样的呢 ? ,require 和 import 导入文件有什么区别呢 ,我们在这里具体来研究一下这个问题
首先 ,我们创建 a.js 和 b.js ,b.js导出模块 ,a.js导入模块 ,再让 main.js 入口模块 import a.js, 使其执行
import 导入 export 和 export default
这个没什么好说的 ECMAScript标准,看看结果就行
b.js
export function hehe() {
console.log('hello')
}
export function haha() {
console.log('world')
}
export default {
hehe1() {
console.log('hello1')
},
haha1() {
console.log('world1')
}
}
a.js
import {haha,hehe} from './b'
import b from './b';
hehe();
haha();
b.hehe1();
b.haha1();
console.log(b);
观测结果
require 导入 module.exports
没啥好说的 ,CommonJs标准
b.js
module.exports = {
hehe() {
console.log('hello')
},
haha() {
console.log('world')
}
}
a.js
let b = require('./b');
b.hehe();
b.haha();
console.log(b);
观测结果
import 导入 module.exports
b.js
module.exports = {
hehe() {
console.log('hello')
},
haha() {
console.log('world')
}
}
a.js
import b from './b';
b.haha();
b.hehe();
console.log(b);
观测结果
可见 module.exports 导出模块是直接导出了一个对象
require 导入 export 和 export default
require导入 export
b.js
export function hehe() {
console.log('hello')
}
export function haha() {
console.log('world')
}
a.js
let b = require('./b');
b.hehe();
b.haha();
console.log(b);
观测结果
可见导出的模型是一个 module 模型, 和普通 import 导入没什么区别
require 导入export default
当我们用 require 导入 export default 时 我们就要注意了
b.js
export default {
hehe() {
console.log('hello')
},
haha() {
console.log('world')
}
}
a.js
let b = require('./b');
// 在 default 对象中
b.default.hehe();
b.default.haha();
console.log(b);
观测结果
可见 ,如果是 export default ,那么会给在对象里新建一个default 的键 ,对应着导出的内容 ,所以获取 export default的值
我们喜欢
let b = require('./b').default;
导入 css
我们可以使用 import 或者 require 的方式导入css ,注意 ,这种导入方式 css 将会是全局样式
let b = require('./assets/css/init.css');
import init from './assets/css/init.css';
console.log(b); // {} 都是空对象
console.log(init) // {}
导入图片
let b = require('./assets/img/logo.png');
import init from './assets/img/logo.png';
console.log(b);
console.log(init)
console.log(b === init)
观测结果
可见 ,图片导入 用什么都可以
导入json
我们新建一个JSON 文件
{
"name": "hjy",
"age": 17,
"hobbies": ["篮球","排球","羽毛球"]
}
let json1 = require('./hello.json');
import json2 from './hello.json';
console.log(json1);
console.log(json2);
console.log(json2 === json1)
观测结果
可见都被转换成了对象 ,webpack 的转换功能真不错
标签：vue,console,log,require,js,导入,export,浅谈 来源： https://blog.csdn.net/qq_51677409/article/details/121438166
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。