成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

代碼分離-import() webpack2.x 中文文檔 翻譯

jaysun / 1757人閱讀

摘要：代碼分離使用中文文檔地址點(diǎn)擊這里動(dòng)態(tài)導(dǎo)入目前，類函模塊加載的語法建議整體交給。在中的是個(gè)分離點(diǎn)，用來把被請(qǐng)求的模塊獨(dú)立成一個(gè)多帶帶的模塊。被替代因?yàn)樵谥惺褂靡呀?jīng)不合建議規(guī)范，因此將在版本中啟用。

代碼分離-使用import()

中文文檔地址點(diǎn)擊這里

動(dòng)態(tài)導(dǎo)入

目前，類函模import()塊加載的語法建議——syntax proposal整體交給ECMAScript。
ES2015(es6)加載器說明定義import()作為一個(gè)方法用來動(dòng)在運(yùn)行時(shí)態(tài)加載es6模塊。
在webpack中的import()是個(gè)分離點(diǎn)——split-point，用來把被請(qǐng)求的模塊獨(dú)立成一個(gè)多帶帶的模塊。import()吧模塊的名字作為一個(gè)參數(shù)，并且返回一個(gè)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時(shí)使用import，你需要使用syntax-dynamic-import插件（babel的插件，卸載.babelrc中）,然而該差價(jià)仍停留在Stage3（第三階段）,會(huì)出現(xiàn)編譯錯(cuò)誤。如果建議到了說明推廣階段，那么這個(gè)標(biāo)準(zhǔn)見不被采用（指ECMAScript標(biāo)準(zhǔn)演進(jìn)）。

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",
        //如果有這個(gè)設(shè)置則不用在添加.babelrc
        options: {
          presets: [["es2015", {modules: false}]],
          plugins: ["syntax-dynamic-import"]
        }
      }]
    }]
  }
};

注意
使用syntax-dynamic-import插件時(shí)，如下情況將報(bào)錯(cuò)。

Module build failed: SyntaxError: "import" and "export" may only appear at the top level, or (import 和 export只能在最外層，也就是不能用在函數(shù)或者塊中)

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()能夠在加載模塊失敗時(shí)進(jìn)行錯(cuò)誤處理，因?yàn)榉祷氐氖莻€(gè)Promise（基于promise）。

警告：require.ensure可以使用參數(shù)給模塊命名，然而import目前上不具備改功能，如果你需要保留該功能很重要，可以繼續(xù)使用require.ensure。

require.ensure([], function(require) {
  var foo = require("./module");
}, "custom-chunk-name");
System.import被替代

因?yàn)樵趙ebpack中使用System.import已經(jīng)不合建議規(guī)范，因此將在webpack版本v2.1.0-beta.28中啟用。建議使用import()。

例子

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82144.html

相關(guān)文章

  • webpack2.x 中文文檔 翻譯 之 分離庫代碼Code Splitting - Librari

    摘要：瀏覽器需要重新下載打包后的文件，即使文件的絕大部分都沒有變化。分離并且以來命名新的入口能夠緩和當(dāng)前的問題?，F(xiàn)在運(yùn)行綁定的檢查結(jié)果是只是被綁定到這個(gè)綁定文件中。 分離庫代碼Code Splitting - Libraries 這個(gè)在webpack2.x中文網(wǎng)已存在，點(diǎn)擊這里 讓我們想一個(gè)簡(jiǎn)單的應(yīng)用——momentjs，他是一個(gè)事件格式化的庫。安裝moment. npm install -...

    elva 評(píng)論0 收藏0

  • webpack2.x 中文文檔 翻譯 之 公開路徑(pbulic path)

    摘要：公開路徑該條已在中文網(wǎng)存在點(diǎn)擊這里有一個(gè)非常有用的設(shè)置，允許你設(shè)置一個(gè)所有資源的基礎(chǔ)路徑在你的應(yīng)用中。使用案例這里有有些實(shí)際應(yīng)用中的案例，其中它使用的非常靈活。 公開路徑(pbulic path) 該條已在webpack2.x中文網(wǎng)存在,點(diǎn)擊這里 webpack有一個(gè)非常有用的設(shè)置，允許你設(shè)置一個(gè)所有資源的基礎(chǔ)路徑在你的應(yīng)用中。它叫做publicPath。 使用案例(Use cases...

    W4n9Hu1 評(píng)論0 收藏0

  • webpack2.x 代碼分離文檔 翻譯

    摘要：代碼分離代碼分離是最受矚目的功能。下面有兩種代碼分離的技術(shù)。使用實(shí)現(xiàn)代碼分離是使用的方式實(shí)現(xiàn)靜待資源異步調(diào)用。通過添加，我們可以在代碼中打一個(gè)分離點(diǎn)，可以以此建立一個(gè)獨(dú)立的包，包含這個(gè)點(diǎn)的所有代碼。 代碼分離(Code Splitting) 代碼分離是webpack最受矚目的功能。它允許你把你的代碼分成不同的部分分開打包，然后實(shí)現(xiàn)在需要的時(shí)候再進(jìn)行加載（按需加載提高速度）————例如用...

    Scott 評(píng)論0 收藏0

  • webpack2.x 中文文檔 翻譯 之 依賴管理 Dependency Management

    摘要：依賴管理該條已在中文網(wǎng)存在，點(diǎn)擊這里表達(dá)式來調(diào)用當(dāng)你的請(qǐng)求包含表達(dá)式，那個(gè)一個(gè)上下文環(huán)境將被創(chuàng)建。一個(gè)包含所有父文件夾和子及后代文件夾中以結(jié)尾的文件的上下文。一個(gè)函數(shù)，返回一個(gè)數(shù)組，包含上下文模塊能夠處理的所有的請(qǐng)求。 依賴管理 Dependency Management 該條已在webpack2.x中文網(wǎng)存在，點(diǎn)擊這里 es6 modules commonjs amd 表達(dá)式...

    raledong 評(píng)論0 收藏0

  • webpack2.x 中文文檔 翻譯 之 出口Output

    摘要：出口影響編譯的輸出告訴怎樣編譯輸出的文件允許多個(gè)入口一個(gè)出口的情況。該選項(xiàng)實(shí)現(xiàn)跨域加載模塊可以的值是命名每個(gè)出口文件。不必明確絕對(duì)路徑。使用設(shè)置項(xiàng)，設(shè)置具體位置。僅僅命名文件名字即可。 出口Output 影響編譯的輸出告訴webpack怎樣編譯輸出的文件允許多個(gè)入口一個(gè)出口的情況。 用法 const config = { output: bundle.js }; module.e...

    weizx 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<