脚本宝典收集整理的这篇文章主要介绍了代码分离-import() webpack2.x 中文文档 翻译,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
代码分离-使用import()
中文文档地址点击这里
动态导入
目前,类函模import()
块加载的语法建议——syntax proposal
整体交给ECMAScript。
ES2015(es6)加载器说明
定义import()
作为一个方法用来动在运行时态加载es6模块。
在webpack中的import()
是个分离点——splIT-point,用来把被请求的模块独立成一个单独的模块。import()
吧模块的名字作为一个参数,并且返回一个Promise: import(name)->Promise.
index.js
function determineDate() {
import('moment').then(function(moment) {
console.LOG(moment().format());
}).catch(function(err) {
console.log('Failed to load moment', err);
});
}
determineDate();
babel配合
如果你想使用babel时使用import
,你需要使用syntax-dynamic-import
插件(babel的插件,卸载.babelrc中),然而该差价仍停留在Stage3(第三阶段),会出现编译错误。如果建议到了说明推广阶段,那么这个标准见不被采用(指ECMAScript标准演进)。
npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-PReset-es2015
# 如下示例,加载moment
npm install --save moment
index-es2015.js
function determineDate() {
import('moment')
.then(moment => moment().format('LLLL'))
.then(str => console.log(str))
.catch(err => console.log('Failed to load moment', err));
}
determineDate();
webpack.config.js
module.exports = {
entry: './index-es2015.js',
output: {
filename: 'dist.js',
},
module: {
rules: [{
test: /.js$/,
exclude: /(node_modules)/,
use: [{
loader: 'babel-loader',
//如果有这个设置则不用在添加.babelrc
options: {
presets: [['es2015', {modules: false}]],
plugins: ['syntax-dynamic-import']
}
}]
}]
}
};
注意
使用syntax-dynamic-import
插件时,如下情况将报错。
Module build failed: SyntaxError: 'import' and 'export' may only apPEar at the top level
, or (import 和 export只能在最外层,也就是不能用在函数或者块中)
Module build failed: SyntaxError: Unexpected token, expected {
配合babel, async
/await
使用ES2017 async/await 配合import()
:
npm install --save-dev babel-plugin-transform-async-to-generator babel-plugin-transform-regenerator babel-plugin-transform-runtime
index-es2017.js
async function determineDate() {
const moment = await import('moment');
return moment().format('LLLL');
}
determineDate().then(str => console.log(str));
webpack.config.js
module.exports = {
entry: './index-es2017.js',
output: {
filename: 'dist.js',
},
module: {
rules: [{
test: /.js$/,
exclude: /(node_modules)/,
use: [{
loader: 'babel-loader',
options: {
presets: [['es2015', {modules: false}]],
plugins: [
'syntax-dynamic-import',
'transform-async-to-generator',
'transform-regenerator',
'transform-runtime'
]
}
}]
}]
}
};
import
替代 require.ensure
?
好的方面:使用import()
能够在加载模块失败时进行错误处理,因为返回的是个Promise
(基于promise)。
警告:require.ensure
可以使用参数给模块命名,然而import
目前上不具备改功能,如果你需要保留该功能很重要,可以继续使用require.ensure
。
require.ensure([], function(require) {
VAR foo = require("./module");
}, "custom-chunk-name");
System.import
被替代
因为在webpack中使用System.import
已经不合建议规范,因此将在webpack版本v2.1.0-beta.28中启用。建议使用import()
。
例子
以上是脚本宝典为你收集整理的代码分离-import() webpack2.x 中文文档 翻译全部内容,希望文章能够帮你解决代码分离-import() webpack2.x 中文文档 翻译所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。