webpack-初探-import，require

最新推荐文章于 2024-03-05 15:38:20 发布
最新推荐文章于 2024-03-05 15:38:20 发布
阅读量958 收藏 1
点赞数 1
分类专栏： webpack 文章标签： javascript webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27449993/article/details/116596309
版权
本文详细探讨了JavaScript模块化中的export和export default用法，解释了export用于导出模块中的函数、对象或原始值，而export default则为模块提供默认导出接口。此外，还总结了导出整个文件对象、导出部分接口的方式，以及import的动态导入和只作为副作用的导入等高级用法。
摘要由CSDN通过智能技术生成

以前我们写的js

我们把js按照功能裁分，在传统的html写法，是要在html中把所有需要的js全部在页面html中引入，而不是在各个自己需要用到其它js文件的文件中引入，这样引入必须保证引入的顺序是否正确。在最早的时候是没有模块的概念的。随着前端工程的发展，前端开发也越来越规范化，更像是软件工程了。那么随之而来的，为了解决工程化的问题，就引入了模块的概念。但是在早期，因为ecmascript原本是没有模块语法的，所以采用的都是社区的各种版本协议，其中影响最深的，就是nodejs使用的CommonJS规范

1、export

一个js文件，可以理解成一个模块，这个模块可以被任意其他的模块引入，引入的结果，就是对这个模块进行执行后，所持有的对象。那么随之而来就有一个问题，文件模块被引入后，所有的东西，都是在自己的作用域中，主动发起引入行为的那个文件，虽然获取到了被引入的对象，但是并不能访问作用域里的东西，所以提供了export，来决定一个模块对外暴露什么东西。

export的作用，就是用于从模块中导出函数、对象或原始值，以便其他程序可以通过 im

最低0.47元/天 解锁文章
qq_27449993
关注
专栏目录
webpack中 import 与 require的区别
我爱吃烤鸡翅:)的博客
07-30 1675
前言 前段时间写了一篇文章import 与 require 详解 - 从深入浅处Node带来的思考，该文章得出import是基于require实现的，并且在不同的环境中实现是不同的，于是乎本片文章旨在从源码来分析在webpack的环境下import与require究竟有何区别。 环境： webpack：^4.35.3 webpack-cli： ^3.3.5 webpack打包之后的代码结构 以...
export default用法_彻底理解JavaScript ES6中的import和export
weixin_39941732的博客
11-20 2063
0、前言前端工程，在最早的时候是没有模块的概念的。随着前端工程的发展，前端开发也越来越规范化，更像是软件工程了。那么随之而来的，为了解决工程化的问题，就引入了模块的概念。但是在早期，因为ecmascript原本是没有模块语法的，所以采用的都是社区的各种版本协议，其中影响最深的，就是nodejs使用的CommonJS规范 。当模块化的概念越来越重要的时候，在es6中，引入了模块的语法：import ...
webpack解惑：require的五种用法
aigenglong0649的博客
10-12 1033
我之前在《前端搭环境之从入门到放弃》这篇文章中吐槽过，webpack中可以写commonjs格式的require同步语法，可以写AMD格式的require回调语法，还有一个require.ensure，以及webpack自己定义的require.include，再加上ES6的import语法，这么多岂不是会把人给搞乱。本篇就来梳理一下这些require各自的特点，以及都在什么场景下使用...
JavaScript中的export、export default、exports和module.exports（export、export default、exports使用详细）
最新发布
weixin_65793170的博客
03-05 1万+
export和export default是ES6 模块系统的核心部分，用于从文件中导出函数、关键字，对象或值，使其可以在其他文件中通过import语句导入和使用，而exports是CommonJS模块系统的一部分，在 Node.js 环境中，你可以使用exports或module.exports来导出模块，但这并不是 ES6 标准的一部分。
JavaScript中的export default
科技向善
12-30 444
export default关键字的作用： 某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名，这个时候就可以使用export default关键字。 ...
初探webpack4
自然醒
06-10 5346
一、前言 2018/2/25，webpack4正式发布，距离现在已经过去三个多月了，也逐渐趋于稳定，而且现在的最新版本都到了4.12.0（版本迭代快得真是让人害怕）。 很多人都说webpack复杂，难以理解，很大一部分原因是webpack是基于配置的，可配置项很多，并且每个参数传入的形式多种多样（可以是字符串、数组、对象、函数。。。），文档介绍也比较模糊，这么多的配置项各种排列组合，想想都...
babel7初探 -- rollup + babel7按需加载polyfill
追逐丶的博客
09-26 6994
一、前言 babel7自从2018年下旬出来以后，一直没有仔细研究过。对于一些基本的配置过程还不是很了解。今天就来说下babel7中一个比较重要的特性–按需加载polyfill。这次乘着学习fetch，由于fetch在主流浏览器兼容性并不高，所以需要用到fetch-polyfill的机会，学习巩固一下babel7. polyfill目前没有准确的翻译。直译是填充物的意思，即引入了对应语法的poly......
webAssembly系列--webAssembly初探究竟
saucxs
06-14 4384
一、前言 自从JavaScript诞生开始，到现在开始变成流行的编程语言，背后的是web发展所推动的。web应用的变得更多更复杂，但是渐渐暴露出JavaScript的问题： （1）语法太灵活导致开发大型web项目困难； （2）性能不足满足一些场景的需要。 二、为什么需要WebAssembly 针对以上的问题，JavaScript出现了一些代替语言，比如： （1）微软的TypeSc...
webpack回顾篇
十年代码写十年
10-24 256
一、webpack简介 1.1 版本更迭 大版本变化 1.2 功能进化 Webpack V1 编译、打包 HMR(模块热更新) 代码分割 文件处理 Webpack V2 Tree Shaking ES module 动态Import 新的文档 Webpack V3 Scope Hoisting(作用域提升) Magic Comments（配合...
export default用法
weixin_30315905的博客
01-25 895
// test.js export default { name: 'zs', age: 20 } 或是 // test.js var info = { name: 'zs', age: 20 } export default info 在main.js中接收，test.js使用export default 向外暴...
JavaScript 的 export default 命令
weixin_30532987的博客
05-18 285
export default 指定模块的默认输出，一个模块只能有一个默认输出。 举个例子。 export-default.js export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } } } 在 import-default.js 中加载该模...
webpack中require和import的区别
江城宴的博客
04-28 595
webpack中require和import的区别 commonjs同步语法 经典的commonjs同步语法如下： var a = require('./a'); a.show(); 此时webpack会将a.js打包进引用它的文件中。这是最普遍的情形，不必赘述。 commonjs异步加载 在commonjs中有一个Modules/Async/A规范，里面定义了require.ens...
Es6 export default 的用法
anliujia6342的博客
08-16 165
export 之后加上default意指默认接口的意思，在一个文件里面默认的只能有一个 其区别就是{} 在export中 引入需要用{}来盛放 //这是设置入口var a='my name is xiaoming' export default a; //这是设置出口 import a from '../../export/a.js'; var a='my n...
js的export 使用default
weixin_35755562的博客
12-30 676
在 JavaScript 中，export 和 import 是用来在模块之间共享信息的语句。 使用 export default 可以将一个变量、函数或类作为默认导出，这意味着它可以在其他模块中使用任意名称来导入。 例如，在文件 myModule.js 中，你可以使用 export default 将函数 add 作为默认导出： export defaultfunction add(a, b) ...
export和export default的用法
weixin_48144237的博客
04-14 359
export使用 有两个文件，一个export.js,一个index.js文件，index中要使用export.js文件。 export.js: 在index.js导入 export default使用 export.js文件 在index.js中导入 总结： 一个js文件是可以有多个 export； 但是一个js文件中只能有一个export default。 ...
export，import，export default用法
m0_37715518的博客
04-11 390
用法1、export {} 和 import{} from ‘’ const test_name = ‘this is test_name’; function say_name(){ console.log(test_name ) } export {test_name,say_name} //vue文件 import { test_name, say_name } from ‘…/helper...
export default用法_ES模块基础用法及常见使用问题
weixin_39853523的博客
11-30 1万+
本文作者：高峰，360奇舞团前端工程师，W3C WoT工作组成员。ES6中引入了模块(Modules)的概念，相信大家都已经挺熟悉的了，在日常的工作中应该也都有使用。本文会简单介绍一下ES模块的优点、基本用法以及常见问题。着重介绍3个使用ES模块的常见问题：如何在浏览器中下快速使用export/import?如何在Node下快速使用export/import?当心，不要修改export输...
ES6 模块化、export、export default 用法
weixin_41796631的博客
04-09 2003
export default 用法：模块化输出 //index.js import animal from './content' //content.js export default 'A cat' export 命令除了输出变量，还可以输出函数，甚至是类（react的模块基本都是输出类） content.js 用 export default 输出数据 //content...
import、export、export default的用法
yml15180824993的博客
08-03 7191
export、export default、import的用法，使用场景和区别
webpack-require-http
04-29
这个模块我并不熟悉，但是根据模块名来猜测，它可能是一个 webpack 的 loader 或者 plugin，用于在打包过程中将 HTTP 请求转换为本地资源引用。 这种做法可能会有一定的优化效果，因为本地资源的加载速度通常比网络...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值