webpack VS Node.js - 二者对 require 功能的实现区别
原文
Webpack 被廣泛用于大部分前端項目。 Webpack 有很多內容,本文我不會全部介紹,但我確實想談談某些方面。
調試項目時最重要的信息之一,是了解導致您看到的錯誤的技術。它可以幫助您更有效地使用 google,幫助您縮小可能導致問題的更改范圍等。
由于抽象的漏洞,理解問題是 Webpack 還是 Node.js 并不像人們想象的那么明顯。 所以讓我們來談談吧!
Node.js
重要的是要記住 npm 捆綁在 Node.js 中。
Npm 是一個包管理器。 npm 偵聽 package.json 文件以確定要安裝的依賴項和版本。 運行 npm install 的結果位于您的 node_modules 目錄中。
如果你在 package.json 中列出包名時弄錯了包名,或者試圖引用一個不存在的版本,當你嘗試安裝依賴項時,npm 會對你大喊大叫。 但是只要這些東西存在,并且 npm 可以安裝它們,它就不在乎。
webpack
許多現代工具讓 Webpack 配置對于開發(fā)人員來說,成為一個黑盒子。但是 Webpack 的目標是捆綁資源以便瀏覽器可以使用它們。
最終,您的依賴項作為您的代碼可以引用的靜態(tài)資產存在。 以前見過這樣的代碼嗎?
const React = require('react')好吧,這就是事情變得有點混亂的地方。
OVERLOADING REQUIRE
Node.js 遵循 CommonJS 約定并包含 require 作為內置函數。 require 允許您在其他文件中引用 JavaScript。
Webpack 支持許多不同的規(guī)范,包括 CommonJS。 所以 require 也是有效的 Webpack 語法。 但是,Webpack 的 require 比 Node.js 中的相同功能更強大。 它使用增強解析并允許您引用絕對路徑、相對路徑和模塊路徑。
Webpack 還包含一個名為 require.resolve 的函數。 此函數采用模塊名稱并返回一個包含模塊路徑的字符串。 兩者之間的區(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 功能的实现区别的全部內容,希望文章能夠幫你解決所遇到的問題。
 
                            
                        - 上一篇: 松下推出 RZ-B310W 和 RZ-B
- 下一篇: 丰田章男道歉!大发汽车承认碰撞测试造假:
