webpack中,require的五种用法
a.js:
module.exports = function(x){ console.log(x); }
一,commonjs同步:
var b = require('./a');
b('你好')
//你好
二,commonjs异步加载:
根据 require.ensure([预加载模块项],fn,文件名称) 语法,webpack实现了它,作用是可以在打包的时候进行代码分片,并异步加载分片后的代码:
require.ensure(['./a'],function(require){ var a = require('./a'); a('hello') },'b')
dist打包下js中的文件名称就是b.js
三,webpack自带的require.include
它可以实现上面是预加载功能,而不用把模块写在数组中;
require.include还有一个作用是能把子模块中的公共部分,提取到父模块中;
require.ensure([],function(require){ require.include('./a') ;//此处只加载,不执行; let b = require('./a'); //执行 b('你好'); },'b');
四,AMD异步加载
webpack既支持commonjs规范也支持AMD规范,这就意味着AMD的经典语法是可以正常使用的,如:
require(['./a'],function(a){ a('你好'); });
当然,这样写的话list.js也是被单独打包成一个文件的。与上面类似,如果你在这里写了多个模块,那么这些模块都会被打包成一个文件,如:
require(['./a','./b'],function(a,b){ a.show(); b.hide(); })
a.js和b.js会被打包在一起。不同的是,AMD的方式无法传入第三个参数当文件名,所以得不到很好看的文件
五,ES6 import
import会被转化为commonjs格式或者是AMD格式,所以不要把它认为是一种新的模块引用方式。babel默认会把ES6的模块转化为commonjs规范的,你也不用费劲再把它转成AMD了。
import a from './a'; //等价于 var list = require('./list');
不过这两种写法只需选一种,避免在代码中同时使用两种,否则会造成混淆。
总结:
//可打包在一起的同步代码,使用import语法 import list from './a'; //需要独立打包、异步加载的代码,使用require.ensure require.ensure(['./a'], function(require){ var a = require('./a'); });
参考地址:
http://www.cnblogs.com/laneyfu/p/6262321.html
只有在泥泞的道路上才能留下脚印