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');

查找规则：

如果X是内置模块，则直接返回该模块。如require('http')。
如果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
如果X不带路径：
- 根据X所在的父模块，确定X可能的安装目录。
- 依次在每个目录中，将X当成文件名或目录名加载。
"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

详谈 import 路径相关推荐

解决protobuf import路径的问题
解决protobuf import路径的问题参考文章: (1)解决protobuf import路径的问题 (2)https://www.cnblogs.com/hsnblog/p/9615742. ...
java import路径_Java import以及Java类的搜索路径
如果你希望使用Java包中的类,就必须先使用import语句导入. import语句与C语言中的 #include 有些类似,语法为: import package1[.package2-].clas ...
python from import 路径_python from...import *
python from...import * 最近在写代码的时候,导入包总是出现一些问题,应该是form...import还没有很好的掌握. 查了一些资料,总结如下: import模块:导入一个模块: ...
python import 路径_Python 从相对路径下import的方法
例如我们有如下结构的文件: pkg/ __init__.py libs/ some_lib.py __init__.py components/ code.py __init__.py 如果我们想要在 ...
python import 路径_python import 上级目录的导入
python import 上级目录的导入,路径,上级,文件,目录,递归 python import 上级目录的导入易采站长站,站长之家为您整理了python import 上级目录的导入的相关内容 ...
python import 路径设置
import sys #查看路径设置情况 sys.path #增加自己程序的目录 sys.path.append("/root/python") 转载于:https://blog. ...
vuejs webpack模板里import路径中@符号是什么意思以及不能自动刷新解决方法
问: 用vuejs的webpack模板生成的项目中,router/index.js里面有一句: import Hello from '@/components/Hello' 这里路径前面的" ...
Python飞机大战两个问题， 1.字体font 2.import路径
如果要插入的字体无法使用可以使用自带字体 self.font = pygame.font.SysFont("arial", 42) 2. 这里假设自己写的py文件路径为/home/ ...
oracle 波浪号不识别,Vue中@import路径不能使用波浪号（~）吗？
Vue中类似这样引入css, @import '~abc/dist/abc.full.css' 编译会报错,Error:Fail to find '~abc/dist/abc.full.css' 用最 ...
vscode 配置import @ 路径提示及代码智提
1.安装插件:Path Intellisense 2.配置: "path-intellisense.mappings": {"@": "${works ...

详谈 import 路径

import路径

花括号

路径

模块格式

参考资料

详谈 import 路径相关推荐

最新文章

热门文章