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 ...
随机推荐
- mysql经典面试题之学生成绩表
需要数据库表1.学生表 Student(SID,Sname,Sage,Ssex) --SID 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别 2.课程表 Course(CID, ...
- Linux后台执行脚本 &与nohup
Linux后台执行脚本的方式: 0.脚本代码 [root@VM_1_3_centos apps]# cat test.php <?php sleep(5); echo "hello w ...
- Python 进阶_生成器 & 生成器表达式
目录 目录 相关知识点 生成器 生成器 fab 的执行过程 生成器和迭代器的区别 生成器的优势 加强的生成器特性 生成器表达式 生成器表达式样例 小结 相关知识点 Python 进阶_迭代器 & ...
- Nginx负载均衡之TCP/UDP流
负载均衡是指在多个后端服务器之间有效地分配网络流量. 从NGINX Plus R5[1] 版本开始可以代理和负载均衡传输控制协议(Transmission Control Protocol,TCP)通 ...
- C++中的函数重载分析(二)
1,重载与指针: 1,下面的函数指针将保存哪个函数的地址? int func(int x) { return x; } int func(int a, int b) { return a + b; } ...
- linux 登录失败,修改root密码
开机按下 esc 重启系统后出现GRUB界面在引导装载程序菜单上,用上下方向键选择你忘记密码的那个系统键入“e” 来进入编辑模式. 接下来你可以看到如下图所示的画面,然后你再用上下键选择最新 ...
- MyBatis中XML 映射配置文件的简单介绍
官网写的比较具体,可以查看以下的网站: http://www.mybatis.org/mybatis-3/zh/configuration.html 另外,实际用到标准的CRUD的操作和查询列表, & ...
- LeetCode Array Easy 414. Third Maximum Number
Description Given a non-empty array of integers, return the third maximum number in this array. If i ...
- Linux系统分辨率设置
linux 设置分辨率 如果你需要在linux上设置显示屏的分辨率,分两种情况:分辨率模式存在与分辨率模式不存在,具体如下. 1,分辨率模式已存在 1)如何查询是否存在: 图形界面:在System S ...
- vue 如何读取编译携带的参数
vue 环境有很多套,我们需要根据不同环境设置不同的一些参数,如何不装任何依赖的情况下获取参数 下面是我制作官网,需要根据开发还是生产环境配置不同CDN,用vue-cli2+webpack,配置是再: ...