webpack 导出、导入模块(及路径)
参考:https://blog.csdn.net/xyphf/article/details/83411552 (下面的代码亲测有效)
注:导入的模块的方法,只有两种方法 import 和 require() 。可以使用 import 导入的基本都可以使用require导入。export default方法导出的,只能使用import导入。webpack2.0以后基本都使用import的写法
es6 动态登入模块的方法是 import() ,参考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import
方案1: export (这种方案可以把要导出的一起导出,也一个一个导出)
导出模块:
let run = function () {
console.log('run')
}
let say = function(){
console.log('say')
}
export {run, say} // 最后一起导出
或 (除了这种导出方式,其他的导出方式,文件有多个接口要暴露,都是导出一个对象)
export let run = function () { // 一项一项的导出
console.log('run')
}
export let say = function(){
console.log('say')
}
导入模块:
import { run, say } from '../../api/test.js'
方案2: export default (这种导出方案,导入时,只能使用一个变量去接收)
导出模块:
let run = function () {
console.log('run')
}
let say = function(){
console.log('say')
}
export default {run, say}
导入模块:
import test from '../../api/test.js' // 导入时,只能使用一个变量去接收,如这里的 test
方案3: module.exports
导出模块:
let run = function () {
console.log('run')
}
let say = function(){
console.log('say')
}
module.exports = {run, say}
导入模块:
import { run, say } from '../../api/test.js'
导入模块的路径:一般导入js文件的路径只有下面三种路径,基本不会使用 绝对路径 和 根目录路径。
1、相对路径 (这个是可行的)
2、npm 包 路径
3、webpack打包配置的路径别名 http://www.cnblogs.com/ye-hcj/p/7082620.html 或 https://blog.csdn.net/m0_37828249/article/details/80781370(注意,配置文件的修改,程序必须要重启npm run dev 才有效)
vue-cli中路径别名使用:使用别名的路径,别名必须在前面,不然无效报错;在src目录的别名,内置是用@来表示的。
注意:1、路径在后面的一节不一定是文件名,也可能是文件夹的名称。如:import router from './router',这个路径 指向的是 rooter下面的 index.js文件。
2、webpack2.0后 import 和 module.exports就不能 搭配使用了,所以最好不要使用 module.exports 导出模块。 https://www.jianshu.com/p/e774aa9fb1a1
vue 导出对象,统一使用export(包括export default)。
webpack 导出、导入模块(及路径)的更多相关文章
- Python 学习 第十五篇:模块搜索路径和包导入
在导入自定义的模块时,除了指定模块名之外,也需要指定目录,由于Python把目录称作包,因此,这类导入被称为包导入.包导入把计算机上的目录变成Python的命名空间,而目录中所包含的子目录和模块文件则 ...
- 第五章 Odoo 12开发之导入、导出以及模块数据
大多数Odoo 模块的定义,如用户界面和安全规则,实际是存储在对应数据表中的数据记录.模块中的 XML 和 CSV 文件不是 Odoo 应用运行时使用,而是载入数据表的手段.正是因为这个原因,Odoo ...
- Day 4-1 模块的导入方法和路径
什么是模块? 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码 ...
- python-模块入门二(模块循环导入,区分python文件的两种用途,模块搜索路径,软件开发的目录规范)
一.模块的循环导入问题 run.py # import m1 # 第一次导入 m1.py # 错误示范 ''' print('正在导入m1') from m2 import y #第一次导入m2 x= ...
- nodejs 导入导出模块module.exports向外暴露多个模块 require导入模块
.moudel.exports 导出模块 导出单个模块 // user.js moudel.exports = 函数名或者变量名: //app.js 导入 require('user.js') 当然. ...
- 模块导入及使用,关键字,模块搜索路径,python文件的两种用途
06.05自我总结 一.模块导入及使用 1.模块导入的两种方式 我们拿time模块并使用其中的time功能进行举例 a)第一种 import time print(time.time) import首 ...
- 01-Node.js学习笔记-模块成员的导出导入
什么是Node.js Node.js是一个让javascript运行在服务端的开发平台: Node.js能做什么? 1.基于社交网络的大规模web应用: 2.命令行工具 3.交互式终端程序 4.带有图 ...
- python27期day15:自定义模块、模块导入、模块的路径、模块的查找顺序、time、datetime、random、os、sys、作业题
1.模块的介绍: py文件就是一个模块 2.模块的分类:内置模块:python标准库 200 第三方模块 自定义模块 3.为什么学习模块? 开发效率高,内置函数和模块 减少重复代码,分文件管理,有助于 ...
- python 获取导入模块的文件路径
接触到项目上有人写好的模块进行了导入,想查看模块的具体内容是如何实现的,需要找到模块的源文件. 本博文介绍两种查找模块文件路径方法: 方法一: #!/usr/bin/python # -*- codi ...
随机推荐
- CodeForces - 990G (点分治+链表计数)
题目:https://vjudge.net/contest/307753#problem/J 题意:一棵树,每个点都有个权值,现在问你,树上gcd每个不同的数有多少个 思路:点分治,首先范围只有 1e ...
- handler消息机制入门
handler消息机制入门 为什么要用handle? 我们在网络上读取图片信息时,是不能把耗时操作放在主线程里面的,当我们在子线程中获取到了图片的消息的时候,我们就需要把这个数据传给主线程. 而直接使 ...
- SVG开发包, 20 个有用的 SVG 工具,提供更好的图像处理
20 个有用的 SVG 工具,提供更好的图像处理 SVG 现正在 Web 设计领域变得越发流行, 你可以使用 Illustrator 或者 Inkscape 来创建 SVG 图像. 但当进行 Web ...
- docker 部署netcore 的关键语句
网站容器:docker run -it --name myTestWeb -p 8080:80 -v /mnt/hgfs/my_share/core/website/:/website microso ...
- 119、TensorFlow如何创建计算图
#Dataflow是并行化编程常用的方式 #当使用TensorFlow执行你的程序的时候有以下几个优点 #1.并行化 .通过声明的边来代表操作之间的依赖 # 对系统来说确定可以并行化的操作是比较容易的 ...
- UIsearchBar 自定义样式
对于修改输入框圆角 的需求, 可以通过修改搜索框背景图片的方式设置. - (void)setSearchFieldBackgroundImage:(nullable UIImage *)backgro ...
- 如何消去delphi Stringgrid重绘时产生重影
procedure TForm1.Stringgrid1DrawCell(Sender: TObject; ACol, ARow: Integer; Rect: TRect; State: TGrid ...
- JS中获取元素使用getElementByID()、getElementsByName()、getElementsByTagName()的用法和区别
Web标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问Documnent中的任一个标签: 1 g ...
- MultipartFile 图片上传到Linux服务器Tomcat下的webapps目录
第一次接触 linux 服务器,做图片上传的时候遇到了些坑,搞了些天总算成功了,记录一下 /** * 上传图片 * * @param request * @param file * @return * ...
- grep与egrep命令
greo -E 等同于 egrep grep常用两种方式 1. grep -c python a.txt 2. cat a.txt | grep -c python a.txt文件如下 i l ...