代码分离-import() webpack2.x 中文文档翻译

jaysun 发布于2019-08-20 15:18 / 1729人阅读

摘要：代码分离使用中文文档地址点击这里动态导入目前，类函模块加载的语法建议整体交给。在中的是个分离点，用来把被请求的模块独立成一个多带带的模块。被替代因为在中使用已经不合建议规范，因此将在版本中启用。

代码分离-使用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()。

例子

https://github.com/webpack/we...

云服务器 GPU云服务器中文翻译 webrtc中文翻译翻译代码微信翻译表白代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82144.html

webpack2.x 中文文档翻译之分离库代码Code Splitting - Librari

摘要：浏览器需要重新下载打包后的文件，即使文件的绝大部分都没有变化。分离并且以来命名新的入口能够缓和当前的问题。现在运行绑定的检查结果是只是被绑定到这个绑定文件中。分离库代码Code Splitting - Libraries 这个在webpack2.x中文网已存在，点击这里让我们想一个简单的应用——momentjs，他是一个事件格式化的库。安装moment. npm install -...

elva 2019-08-20 14:43 评论0 收藏0
webpack2.x 中文文档翻译之公开路径(pbulic path)

摘要：公开路径该条已在中文网存在点击这里有一个非常有用的设置，允许你设置一个所有资源的基础路径在你的应用中。使用案例这里有有些实际应用中的案例，其中它使用的非常灵活。公开路径(pbulic path) 该条已在webpack2.x中文网存在,点击这里 webpack有一个非常有用的设置，允许你设置一个所有资源的基础路径在你的应用中。它叫做publicPath。使用案例(Use cases...

W4n9Hu1 2019-08-20 14:43 评论0 收藏0
webpack2.x 代码分离文档翻译

摘要：代码分离代码分离是最受瞩目的功能。下面有两种代码分离的技术。使用实现代码分离是使用的方式实现静待资源异步调用。通过添加，我们可以在代码中打一个分离点，可以以此建立一个独立的包，包含这个点的所有代码。代码分离(Code Splitting) 代码分离是webpack最受瞩目的功能。它允许你把你的代码分成不同的部分分开打包，然后实现在需要的时候再进行加载（按需加载提高速度）————例如用...

Scott 2019-08-21 15:18 评论0 收藏0
webpack2.x 中文文档翻译之依赖管理 Dependency Management

摘要：依赖管理该条已在中文网存在，点击这里表达式来调用当你的请求包含表达式，那个一个上下文环境将被创建。一个包含所有父文件夹和子及后代文件夹中以结尾的文件的上下文。一个函数，返回一个数组，包含上下文模块能够处理的所有的请求。依赖管理 Dependency Management 该条已在webpack2.x中文网存在，点击这里 es6 modules commonjs amd 表达式...

raledong 2019-08-20 14:42 评论0 收藏0
webpack2.x 中文文档翻译之出口Output

摘要：出口影响编译的输出告诉怎样编译输出的文件允许多个入口一个出口的情况。该选项实现跨域加载模块可以的值是命名每个出口文件。不必明确绝对路径。使用设置项，设置具体位置。仅仅命名文件名字即可。出口Output 影响编译的输出告诉webpack怎样编译输出的文件允许多个入口一个出口的情况。用法 const config = { output: bundle.js }; module.e...

weizx 2019-08-20 14:42 评论0 收藏0