原文

Webpack 被廣泛用于大部分前端項目。 Webpack 有很多內(nèi)容，本文我不會全部介紹，但我確實想談談某些方面。

調(diào)試項目時最重要的信息之一，是了解導致您看到的錯誤的技術。它可以幫助您更有效地使用 google，幫助您縮小可能導致問題的更改范圍等。

由于抽象的漏洞，理解問題是 Webpack 還是 Node.js 并不像人們想象的那么明顯。 所以讓我們來談談吧！

Node.js

重要的是要記住 npm 捆綁在 Node.js 中。

Npm 是一個包管理器。 npm 偵聽 package.json 文件以確定要安裝的依賴項和版本。 運行 npm install 的結果位于您的 node_modules 目錄中。

如果你在 package.json 中列出包名時弄錯了包名，或者試圖引用一個不存在的版本，當你嘗試安裝依賴項時，npm 會對你大喊大叫。 但是只要這些東西存在，并且 npm 可以安裝它們，它就不在乎。

webpack

許多現(xiàn)代工具讓 Webpack 配置對于開發(fā)人員來說，成為一個黑盒子。但是 Webpack 的目標是捆綁資源以便瀏覽器可以使用它們。

最終，您的依賴項作為您的代碼可以引用的靜態(tài)資產(chǎn)存在。 以前見過這樣的代碼嗎？

const React = require('react')

好吧，這就是事情變得有點混亂的地方。

OVERLOADING REQUIRE

Node.js 遵循 CommonJS 約定并包含 require 作為內(nèi)置函數(shù)。 require 允許您在其他文件中引用 JavaScript。

Webpack 支持許多不同的規(guī)范，包括 CommonJS。 所以 require 也是有效的 Webpack 語法。 但是，Webpack 的 require 比 Node.js 中的相同功能更強大。 它使用增強解析并允許您引用絕對路徑、相對路徑和模塊路徑。

Webpack 還包含一個名為 require.resolve 的函數(shù)。 此函數(shù)采用模塊名稱并返回一個包含模塊路徑的字符串。 兩者之間的區(qū)別有時令人困惑，因此我想在此處包含該標注。

SUPPORTING MULTIPLE STANDARDS

如前所述，Webpack 允許使用多種不同的語法（盡管它建議您在項目中保持一致）。 其中之一是 ES6。 ES6 中 require 的大致等價物是這樣的。

import React from 'react'

這就是事情真正變得有趣的地方。 ES6 和 CommonJS 不是同一個規(guī)范！ 因此，即使兩者都在 Webpack 中有效，但它們通常不在生態(tài)系統(tǒng)的其他地方。 并且由于 Webpack 為您捆綁了許多不同類型的文件，因此要保持整潔可能具有挑戰(zhàn)性。

Node.js

目前，ES6 導入語法在 Node.js 中無效。 如果你想支持它，你可以使用實驗包 esm。

這意味著在服務器端運行的文件，利用 Node.js 運行時，可能需要使用 require。

BABEL

相反，許多 JavaScript 文件在瀏覽器中運行。這些文件通常是用 Babel 構建的。

當 Babel 編譯您的代碼時，它會將您所有的導入轉換為 Node.js 的 require 語句（而不是 Webpack 的）。

值得注意的是，Babel 輸出通常需要由 Webpack 捆綁。

總結

以上是生活随笔為你收集整理的webpack VS Node.js - 二者对 require 功能的实现区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。