webpack 导出、导入模块(及路径)

参考: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 包 路径 

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

猜你喜欢

转载自www.cnblogs.com/wfblog/p/10019673.html