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 配置对于开发人员来说,成为一个黑盒子。但是 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 功能的实现区别相关推荐
- WebStorm 打开Node.js的代码提示功能
Node.js coding assistance is disabled,Suggests configuring coding assistance for Node.js core module ...
- node.js发送html,利用Node.JS实现邮件发送功能
第一步.配置篇 首先需要安装nodemailer库 npm install nodemailer//默认会安装最新的版本. 关于这个库的文档参见nodemailer 第二步.库的一些使用介绍 这个库使 ...
- webpack及node.js基础必会--path模块的常见操作
前言 在没有相关经验的同学,在学习webpack和使用node时,经常会遇到__dirname path.resolve 等,这时往往会一脸懵逼这些都是什么,干嘛的,为什么这些资料和书都完全不提,难道 ...
- 在春节来临之际使用 javascript + Node.js 实现邮件传输功能给远方的朋友发封邮件拜个早年
目录: 一.引言 二.Nodemailer 模块 1.简介 2.特点 3.使用 三.可重用的邮件发送模块(以服务器挂载路由函数为例) 四.总结 一.引言 电子邮件,是互联网应用最广泛使用的服务之一,通 ...
- node.js中exports与module.exports的区别分析
前言 关于Node.js中的exports和module.exports,很多时候都比较容易让人混淆,弄不清楚两者间的区别.那么我们就从头开始理清这两者之间的关系. 来源 在开发Node.js应用的时 ...
- node.js全局安装和本地安装的区别
上一篇文章<npm 常用命令详解>主要是整理了最常使用的npm命令及相关介绍,其中有提到全局安装(npm install gulp -g)和本地安装(npm install gulp),下 ...
- node.js中exports与module.exports的区别
CommonJS Node应用是由模块组成的,采用的是CommonJS模块规范. 根据规范一个文件就是一个模块,有自己单独的作用域,在一个文件中定义的变量,函数,类都是私有的,对其他的文件不可见. 根 ...
- Node.js 中 exports 和 module.exports 的区别
每一个模块中都有一个 module 对象, module 对象中有一个 exports 对象 我们可以把需要导出的成员都放到 module.exports 这个接口对象中,也就是 module.exp ...
- node.js之打包工具webpack
什么是 Webpack Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 为什么重复造轮子 市面上已经存在的模块管理和打包工具并不 ...
最新文章
- C#编程(十六)----------匿名类型
- gitlab自带的Nginx与原Nginx冲突的解决方案
- mysql各个组件的作用
- jquery post 同步异步总结
- Java 8 新特性 Optional 类学习,理解并应用。NullPointerException空值检测
- AJAX 带有 取消功能的 UpdateProgress
- python pdb调试多进程_Python使用pdb进行调试
- 瞎折腾-CentOS 7.4 编译4.16.2版kernel 并安装
- js中去除字符串中所有的html标签
- Sql中Output参数用法和分页存储过程
- android开发点击版本号多次无法进入开发者模式模式
- 题目:找出某种珍贵药材的生长区域
- 基于C++的数据结构-1
- 数据中台建设的价值及数据中台架构
- java中的圈复杂度计算_[代码质量] 圈复杂度和代码质量优化(附带示例代码纠正代码质量)...
- Linux命令 - ps命令
- c语言反三角函数值域,反三角函数的定义域和值域
- Microsoft Visual Studio Installer Projects下载安装太慢
- 我的物联网项目(十五) 微服务业务拆分
- 【SQL必知必会】002-基础篇:了解SQL:一门半衰期很长的语言