代码星散-import() webpack2.x 中文文档 翻译

2024年4月1日 134次阅读 来源: farmerz

代码星散-运用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()。

例子

    原文作者：farmerz
    原文地址: https://segmentfault.com/a/1190000008787672
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞