webpack 导出、导入模块（及路径）

时间：2021-01-04 22:14:22

参考：https://blog.csdn.net/xyphf/article/details/83411552 (下面的代码亲测有效)

注：导入的模块的方法，只有两种方法  import 和 require() 。可以使用 import 导入的基本都可以使用require导入，export default方法导出的，只能使用import导入。webpack2.0以后基本都使用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目录的别名，内置是用@来表示的。

注意：路径在后面的一节不一定是文件名，也可能是文件夹的名称。如：import router from './router'，这个路径 指向的是 rooter下面的  index.js文件。

 

标签：

相关文章