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 ...
随机推荐
- [CSP-S模拟测试]:Lighthouse(哈密顿回路+容斥)
题目背景 $Billions\ of\ lighthouses...stuck\ at\ the\ far\ end\ of\ the\ sky.$ 题目描述 平面有$n$个灯塔,初始时两两之间可以相 ...
- LintCode之奇偶分割数组
题目描述: 我的分析:题目要求将奇数放在偶数的前面,没有要求将奇数或偶数排序,因此我可以设置两个指针,一个(i)指向数组第一个数字,另一个(j)指向数组的最后一个数字,因为奇数要放在前面,所以从后往前 ...
- LCA 总结
代码: //RMQ求LCA struct node { int v, w; }; class LCA { private: vector<int>dep, pos, olx, dis; v ...
- 热经-北京中地时空数码科技有限公司-研发工程师(WEBGIS方向)
一面: 登记,填写个人信息 笔试 选择题: HTML,CSS,JS 的选择题,都是基础题.其中有一道问哪个不是 document 的属性或方法,我在 bgColor 和 focus() 上面纠结了一下 ...
- xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
运行xcode命令报错: sh-3.2# xcodebuild xcode-select: error: tool 'xcodebuild' requires Xcode, but active de ...
- CET-6 分频周计划生词筛选(Week 1)
Week 1 2016.09.03 p17 bias = prejudice / prejudge p18 diminish p19 distinguish/extinguish + majority ...
- Vue 在手机上键盘把底部菜单顶上去的解决方案
Vue 在手机上键盘把底部菜单顶上去的解决方案 ios和安卓的键盘的区别 ios和安卓的键盘的区别弹起方式不同, ios直接弹出键盘, 不影响页面, 而安卓键盘弹起时会把页面顶起来, 这样就会把底部菜 ...
- vue - blog开发学习5
基本功能和后台联调 1.首页的所有博客 因为是前后台都是本地开发,所以前端vue需要设置proxy:修改/config/index.js中的这个proxyTable proxyTable: { '/a ...
- Ruby 读书
输出: print printf 既定格式输出 puts 自动换行 p 显示对象 sprintf 不规则字符串 pp 需要导入库 putc(字母) 转移字符和单双引号 include Math或者直 ...
- MYSQL 查询脚本优化
业务需要,优化一段多表查询脚本. 总结下来,采取以下步骤. 分析语句 分析语句,了解逻辑,是否可以先优化逻辑. 查询语句的查询范围,是否是全表查询,如果是,尽量优化为按索引查询. 查看语句数量,是否有 ...