原文

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 配置对于开发人员来说,成为一个黑盒子。但是 Webpack 的目标是捆绑资源以便浏览器可以使用它们。

最终,您的依赖项作为您的代码可以引用的静态资产存在。 以前见过这样的代码吗?

const React = require('react')

好吧,这就是事情变得有点混乱的地方。

OVERLOADING REQUIRE

Node.js 遵循 CommonJS 约定并包含 require 作为内置函数。 require 允许您在其他文件中引用 JavaScript。

Webpack 支持许多不同的规范,包括 CommonJS。 所以 require 也是有效的 Webpack 语法。 但是,Webpack 的 require 比 Node.js 中的相同功能更强大。 它使用增强解析并允许您引用绝对路径、相对路径和模块路径。

Webpack 还包含一个名为 require.resolve 的函数。 此函数采用模块名称并返回一个包含模块路径的字符串。 两者之间的区别有时令人困惑,因此我想在此处包含该标注。

SUPPORTING MULTIPLE STANDARDS

如前所述,Webpack 允许使用多种不同的语法(尽管它建议您在项目中保持一致)。 其中之一是 ES6。 ES6 中 require 的大致等价物是这样的。

import React from 'react'

这就是事情真正变得有趣的地方。 ES6 和 CommonJS 不是同一个规范! 因此,即使两者都在 Webpack 中有效,但它们通常不在生态系统的其他地方。 并且由于 Webpack 为您捆绑了许多不同类型的文件,因此要保持整洁可能具有挑战性。

Node.js

目前,ES6 导入语法在 Node.js 中无效。 如果你想支持它,你可以使用实验包 esm。

这意味着在服务器端运行的文件,利用 Node.js 运行时,可能需要使用 require。

BABEL

相反,许多 JavaScript 文件在浏览器中运行。这些文件通常是用 Babel 构建的。

当 Babel 编译您的代码时,它会将您所有的导入转换为 Node.js 的 require 语句(而不是 Webpack 的)。

值得注意的是,Babel 输出通常需要由 Webpack 捆绑。

webpack VS Node.js - 二者对 require 功能的实现区别相关推荐

  1. WebStorm 打开Node.js的代码提示功能

    Node.js coding assistance is disabled,Suggests configuring coding assistance for Node.js core module ...

  2. node.js发送html,利用Node.JS实现邮件发送功能

    第一步.配置篇 首先需要安装nodemailer库 npm install nodemailer//默认会安装最新的版本. 关于这个库的文档参见nodemailer 第二步.库的一些使用介绍 这个库使 ...

  3. webpack及node.js基础必会--path模块的常见操作

    前言 在没有相关经验的同学,在学习webpack和使用node时,经常会遇到__dirname path.resolve 等,这时往往会一脸懵逼这些都是什么,干嘛的,为什么这些资料和书都完全不提,难道 ...

  4. 在春节来临之际使用 javascript + Node.js 实现邮件传输功能给远方的朋友发封邮件拜个早年

    目录: 一.引言 二.Nodemailer 模块 1.简介 2.特点 3.使用 三.可重用的邮件发送模块(以服务器挂载路由函数为例) 四.总结 一.引言 电子邮件,是互联网应用最广泛使用的服务之一,通 ...

  5. node.js中exports与module.exports的区别分析

    前言 关于Node.js中的exports和module.exports,很多时候都比较容易让人混淆,弄不清楚两者间的区别.那么我们就从头开始理清这两者之间的关系. 来源 在开发Node.js应用的时 ...

  6. node.js全局安装和本地安装的区别

    上一篇文章<npm 常用命令详解>主要是整理了最常使用的npm命令及相关介绍,其中有提到全局安装(npm install gulp -g)和本地安装(npm install gulp),下 ...

  7. node.js中exports与module.exports的区别

    CommonJS Node应用是由模块组成的,采用的是CommonJS模块规范. 根据规范一个文件就是一个模块,有自己单独的作用域,在一个文件中定义的变量,函数,类都是私有的,对其他的文件不可见. 根 ...

  8. Node.js 中 exports 和 module.exports 的区别

    每一个模块中都有一个 module 对象, module 对象中有一个 exports 对象 我们可以把需要导出的成员都放到 module.exports 这个接口对象中,也就是 module.exp ...

  9. node.js之打包工具webpack

    什么是 Webpack Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 为什么重复造轮子 市面上已经存在的模块管理和打包工具并不 ...

最新文章

  1. C#编程(十六)----------匿名类型
  2. gitlab自带的Nginx与原Nginx冲突的解决方案
  3. mysql各个组件的作用
  4. jquery post 同步异步总结
  5. Java 8 新特性 Optional 类学习,理解并应用。NullPointerException空值检测
  6. AJAX 带有 取消功能的 UpdateProgress
  7. python pdb调试多进程_Python使用pdb进行调试
  8. 瞎折腾-CentOS 7.4 编译4.16.2版kernel 并安装
  9. js中去除字符串中所有的html标签
  10. Sql中Output参数用法和分页存储过程
  11. android开发点击版本号多次无法进入开发者模式模式
  12. 题目:找出某种珍贵药材的生长区域
  13. 基于C++的数据结构-1
  14. 数据中台建设的价值及数据中台架构
  15. java中的圈复杂度计算_[代码质量] 圈复杂度和代码质量优化(附带示例代码纠正代码质量)...
  16. Linux命令 - ps命令
  17. c语言反三角函数值域,反三角函数的定义域和值域
  18. Microsoft Visual Studio Installer Projects下载安装太慢
  19. 我的物联网项目(十五) 微服务业务拆分
  20. 【SQL必知必会】002-基础篇:了解SQL:一门半衰期很长的语言

热门文章

  1. 2019.3.18 区块链论文翻译
  2. markDown 语法(个人练习篇)
  3. 用Helper对类的行为进行修饰以便复用(附:外三篇)
  4. Struts1.x的架构一个简图
  5. [发布] 多选控件和时钟控件
  6. 浅谈导航电子地图的组成和制作流程
  7. 常用网络命令使用技巧详解续编1
  8. 数据结构学习官方代码
  9. webservice用cxf发布SOAP
  10. 微服务 第六章 springboot 通过Spring-data-jpa 配置Oracle数据源(简单步骤)