详谈 import 路径

import路径

import {test} from './test';

花括号

import {test} from './test';
import test from './test';

如果有默认导出export default则可以省略花括号，且import的模块名是随意的，如：

// a.js
export default 'test';


// b.js
import a from './a';
import A from './a';
import myA from './a';

非export default导出的模板名，在引用时须加花括号，且引用模块名与导出时的命名必须相同，如：

// a.js
export const a = 'test';


// b.js
import {a} from './a';
import {A} from './a'; // error
import {myA} from './a'; // error

一个模块中只允许一个默认导出export default，但允许多个命名导出export;

路径

import test from 'test';
import test from './test';

babel默认会把ES6的模块转化为commonjs规范。

import test from 'X';
// 等价于
var test = require('X');

查找规则：

1. 如果X是内置模块，则直接返回该模块。如require('http')。

2. 如果X以./、/、../开头：

   • 根据X所在的父模块，确定X的绝对路径。
   • 将X当做文件，依次查找下面的文件，如果找到，则直接返回。
     • X
     • X.js
     • X.json
     • X.node
   • 将X当做目录，依次查找下面的文件，如果找到，则直接返回。
     • X/package.json(查找main字段中的文件，规则同上)
     • X/index.js
     • X/index.json
     • X/index.node

3. 如果X不带路径：

   • 根据X所在的父模块，确定X可能的安装目录。
   • 依次在每个目录中，将X当成文件名或目录名加载。

4. "not found"

模块格式

CommonJS

同步加载模块，主要用于服务端(node)。

// math.js
exports.add = function(a, b) {
  return a + b;
}


// main.js
var math = require('./math');
math.add(2, 3); // 5

AMD

异步模块定义，用于像RequireJS这样的模块加载器，主要用于浏览器。

// math.js
define(function() {
  var add = function(x, y) {
    return x + y;
  }

  return  {
    add: add
  }
})


// main.js
require(['math'], function(math) {
  alert(math.add(1, 1));
})

UMD

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define([], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        root.returnExports = factory();
  }
}(typeof self !== 'undefined' ? self : this, function () {

    // Just return a value to define the module export.
    // This example returns an object, but the module
    // can return a function as the exported value.
    return {};
}));

ES6

es6通过import、export实现模块的输入输出

参考资料

when-should-i-use-curly-braces-for-es6-import

what require.resolve() does

UMD