1、require()导入模块 注意：使用require方法加载模块，会执行被加载模块中的代码 /* 模块有三大分类：内置模块、自定义模块、第三方模块 */ /* 示例：使用require方法加载模块...*/ // 注意：使用require方法加载模块，会执行被加载模块中的代码 // 1、加载内置模块 const fs = require('fs') // 2、加载自定义模块 const riven.../riven-custom') // 3、加载第三方模块(第三方模块需要我们先下载才能使用) const moment = require('moment') 2、module.exports、exports...导出模块 注意：require()导入模块时，得到的永远是module.exports指向的对象 console.log('这是我的自定义模块：Riven-custom'); /* 时刻谨记，require...()模块时，得到的永远是module.exports指向的对象*/ // module.exports===exports(只是在默认情况下全等，指向改变后不是全等) /* 指向误区：谨记以module.exports
undefined 是其它类型（包括 void）的子类型，可以赋值给其它类型（如：数字类型），赋值后的类型会变成 null 或 undefined 默认情况下，编译器会提示错误，这是因为 tsconfig.json...如何在 Node 中使用 TS 安装相关声明文件，如：@types/node； 因为 node 模块遵循 CommonJS 规范，一些 node 模块（如：express）的声明文件，用 export...; 注意，这里并没有使用 require 关键字，而是直接使用导入符号的限定名赋值。...image.png React + TS 项目问题 1. 使用 import 引入非 JS 模块会报错，而使用 require 则没有问题 import styles from '....使用 webpack 的 module.hot 会警告没有类型定义 # 下载这个类型声明文件 $ npm install --save @types/webpack-env if (process.env.NODE_ENV
在此对webpack的性能优化进行几点声明： 在部分极度复杂的环境下，需要双package.json文件，即实行三次打包 在代码分割时，低于18K的文件没必要单独打包成一个chunk,http请求次数过多反而影响性能...prerender和PWA互斥，这个问题暂时没有解决 babel缓存编译缓存的是索引，即hash值，非常吃内存，每次开发完记得清理内存 babel-polyfill按需加载在某些非常复杂的场景下比较适合...preload 预加载资源 prefetch按需请求资源 CSS模块化，不怕命名冲突 小图片的base64处理 文件后缀省掉jsx js json等 实现React懒加载，按需加载 ， 代码分割...主要看一下React技术栈，如何在构建中接入热刷新 无论什么技术栈，都需要在dev模式下加上 webpack.HotModuleReplacementPlugin插件 devServer: {...reuseExistingChunk: true,// 使用复用已经存在的模块 }, react: {
ECMAScript Module Support in Node.js 这一特性实际上在 4.5 版本就已经出现在 DevBlog 中，但由于其影响面较广，在当时只是被作为预览版本用于收集反馈和进行调整.../cjs/index.cjs", } } } 从而为不同的调用方式：import(pkg) 和 require(pkg) 提供不同的入口。...这一行为看起来似乎没什么问题，但考虑到 NodeJs 中对模块的定义是入口文件使用 .mjs，包的 package.json 中声明了 "type": "module"，以及在 React 项目中如果配置了...--jsx react-jsx，那么实际上所有的 .jsx/.tsx 文件中都隐式地包含了一行 React 的导入，这两种情况都意味着 TypeScript 的模块检查策略需要进一步地增强。...在 4.7 版本，这种情况下的函数类型推导现在可以正确地从入参类型、内部逻辑（return 语句）等进行类型地推导。
一、复杂项目配置正确姿势 - Node API： Webpack 的配置方式，简单的项目通过一份 webpack.config.js 配置文件可以 hold 住了。...直接写到 dependencies 参数中的模块不同点在于只会被加载，没有被 require 的时候不会被运行。 例： a.js //....如上所说，只放在 dependencies 的模块，没有被 require 是不会运行的。所以最后输出是: b //console.log('b') from ....//用 require 加载原生模块target:"node",//指定不打包的文件 (指定路径名，可以用正则)externals:[ /node_modules/],output:{ //指定使用...要注意的是：如果没有指定 target 为 node，而代码里有 require Node 的原生模块（例如http、url等）但又没有设置 Alias，也就是找不到这些模块时，Webpack 会尝试一个兼容逻辑
/node_modules 中找，再没有就去 ../../node_modules 中找，以此类推。这和 Node.js 的模块寻找机制很相似。...当安装的第三方模块都放在项目根目录的 node_modules 目录下时，就没有必要按照默认的方式去一层层地寻找，可以指明存放第三方模块的绝对路径，以减少寻找....中指定的入口文件 react.js 为模块的入口 一套是将 React 的所有相关代码打包好的完整代码放到一个单独的文件中， 这些代码没有采用模块化，可以直接执行。...例如在确定的情况下将 require ( './data '） 写成 require （'....10 优化文件监听的性能 在开启监听模式时，默认情况下会监听配置的 Entry 文件和所有 Entry 递归依赖的文件，在这些文件中会有很多存在于 node_modules 下，因为如今的 Web 项目会依赖大量的第三方模块
如果 B 本身支持多版本共存，那么需要保证 A 正确的加载到 B v1.0 和 C 正确的加载到 B v2.0。 我们重点考虑第二个问题。...破坏单例模式 require 的缓存机制 node 会对加载的模块进行缓存，第一次加载某个模块后会将结果缓存下来，后续的 require 调用都返回同一结果，然而 node 的 require 的缓存并非是基于...这种方式尽管解决了依赖重复和 link hell 两个核心问题,却引入了其他问题 packageA 可以轻松的导入 packageB，即使没有在 packageA 里声明 packageB 为其依赖，甚者...但在我们的代码里却可以使用 debug 模块，因为这是 express 引入的模块，虽然我们自己没有显式的引入 // src/index.js const debug = require('debug'...本身没有将rand声明为其依赖，cargo 则进行报错处理 ?
该模块可以让你选择的测试工具在加载模块时自动对模块进行编译。...npm install --save babel-register 你可能还要安装你需要的Babel presets，比如es2015和react。...以下是一个使用了es2015和react两个preset的.babelrc文件示例： { "presets": ["es2015", "react"] } 配置Webpack或Browserify...Mocha 在Node.js环境中你所要做的只是在执行Mocha时传入正确的参数： mocha --compilers js:babel-register --require babel-polyfill...不像Mocha，Jasmine并没有提供命令行参数用于配置转译。因此我们需用通过babel-node来启动Jasmine。
在其中，你可以定义（如示例所示）一个路径列表（还有包含的通配符格式），这些路径引用了工作区所在的文件夹。...在这些文件夹中，你只需声明自己的 package.json 文件，而每个文件都声明它自己的依赖项。 你可以看到，各个 API 文件夹的 JSON 文件实际上区别只有名称和依赖项。...如果你不太熟悉这个术语（以前我也不熟），这里就简单介绍一下：对等依赖项和普通的依赖项几乎没什么区别，它们并没有定义一个严格的要求，而是声明： 你的软件包与另一个模块的特定版本兼容。...如果该模块已经安装并且是正确的版本，则不要执行任何操作。 如果找不到该模块或版本存在冲突，则向开发人员显示一条消息，警告他们这一事实，此外什么也不做。...这可能会导致不兼容的问题，想象一下，我们把依赖模块 B 的模块 A（模块 A 又依赖 React@15）添加到依赖 React@16 的项目中。
修订号」，通常情况下，修改主版本号是做了大的功能性的改动，修改次版本号是新增了新功能，修改修订号就是修复了一些 bug； 如果某个版本的改动较大，并且不稳定，可能如法满足预期的兼容性需求，就需要发布先行版本...2. devDependencies devDependencies 中声明的是开发阶段需要的依赖包，如 Webpack、Eslint、Babel 等，用于辅助开发。...比如，我们的项目依赖 A 模块和 B 模块的 1.0 版，而 A 模块本身又依赖 B 模块的 2.0 版。大多数情况下，这不是问题，B 模块的两个版本可以并存，同时运行。...如果需要编译一些同构项目，如 node 项目，则只需将 webpack.config.js 的 target 选项设置为 node 进行构建即可。...常见的协议如下： MIT ：只要用户在项目副本中包含了版权声明和许可声明，他们就可以拿你的代码做任何想做的事情，你也无需承担任何责任。
; 正如我们在前面提到的define 函数的作用，没有define 函数的CommonJS 模块是无法直接在浏览器中执行的——浏览器环境中无法实现同Node.js 环境一样同步的require 方法。...2．智能的静态分析 熟悉AMD 规范的都知道，在AMD 模块中使用模块内的require 方法声明依赖的时候，传入的moduleId 必须是字符串常量，而不可以是含变量的表达式。...如果依赖模 块没有被事先打包进来，在执行期再去加载，那么由于网络请求的时间不可忽视，请求时阻塞JavaScript 的执行也不可行，模块内的同步require也就无从实现。...如配合style-loader，样式模块可以被热替换；配合 react-hot-loader，可以对React class 模块进行热替换。...7 小结 除了上面介绍过的，业界还有一些其他的打包方案，如rollup、jspm 提供的bundle工具等，不过它们或者还不够成熟，或者缺乏特点，所以没有在这里介绍。
，则是React团队自定义的模块处理工具，用来解决长相对路径的问题，例如： // ref: react-15.5.4 var ReactCurrentOwner = require('ReactCurrentOwner...= Object.prototype.hasOwnProperty; var REACT_ELEMENT_TYPE = require('ReactElementSymbol'); Haste模块机制下模块引用不需要给出明确的相对路径...，而是通过项目级唯一的模块名来自动查找，例如： // 声明 /** * @providesModule ReactClass */// 引用 var ReactClass = require('ReactClass...'); 从表面上解决了长路径引用的问题（并没有解决项目结构深层嵌套的根本问题），使用非标准模块机制有几个典型的坏处： 与标准不和，接入标准生态中的工具时会面临适配问题 源码难读，不容易弄明白模块依赖关系...：默认模式，在WHITESPACE_ONLY的基础上进一步缩短变量名（局部变量和函数形参），逻辑功能基本等价，特殊情况（如eval('localVar')按名访问局部变量和解析fn.toString()
const gulp = require('gulp'); // 像加载标准Node模块那样加载Gulp插件 const sourcemap = require('gulp-sourcemaps');...注意：源码映射需要两步：一个是声明想要源码映射，另一个是写源码映射文件。 在终端输入gulp就可以运行这个这个Gulp任务了。 一个好用的热重载工具：gulp-watch。。。监控文件系统的变化。...webpack专注于打包javascript和css模块。。 用Webpack构建web程序 — 打包器与插件： webpack插件：用来改变构建过程的行为的。...('jquery'); yes，正如你看到的，Webpack把CommonJS模块给了我们，无需任何额外的配置，就可以使用来自npm的模块。。...总结： npm脚本是实现简单任务自动化和脚本调用的最佳选择 Gulp可以用js编写更加复杂的任务，并且他是跨平台的 如gulpfile太长可以把代码分解到多个文件中 webpack可以用来生成客户端打包文件
二 模块化 早期 JavaScript 开发很容易存在全局污染和依赖管理混乱问题。这些问题在多人开发前端应用的情况下变得更加棘手。...如果没有，在父级目录的 node_modules 查找，如果没有在父级目录的父级目录的 node_modules 中查找。 沿着路径向上递归，直到根目录下的 node_modules 目录。...a.js 模块 和 b.js 模块互相引用，但是没有造成循环引用的情况。 执行顺序是父 -> 子 -> 父； 那么 Common.js 规范是如何实现上述效果的呢？...① 首先执行 node main.js ，那么开始执行第一行 require(a.js)； ② 那么首先判断 a.js 有没有缓存，因为没有缓存，先加入缓存，然后执行文件 a.js （需要注意 是先加入缓存...当我们把 myExports 对象传进去，但是直接赋值 myExports = { name:'我不是外星人' } 没有任何作用，相等于内部重新声明一份 myExports 而和外界的 myExports
部分依赖与webpack的插件会调用项目中webpack的内部模块，这种情况下仍然需要在项目本地安装webpack，而如果全局和本地都有，容易造成混淆。.../xx.js'; const num = add.name ES6 Module会自动采用严格模式 导出 第一种：将变量的声明和导出写在一行 第二种：将先进行变量声明，然后再用同一个export语句导出...动态：模块依赖关系的建立发生在代码运行阶段；静态：模块依赖关系的建立发生在代码编译阶段。 ES6代码的编译阶段就可以分析出模块的依赖关系： 死代码检测和排除，用静态分析工具检测哪些模块没有被调用过。...模块变量类型检查，JavaScript属于动态类型语言，不会在代码执行前检查类型错误。而ES6 Module的静态模块结构有助于确保模块之间传递的值或接口类型是正确的。 编译器优化。...，以便在其它的入口和模块中使用。
Node 13 添加了对标准 ES6 模块和基于 require 的模块（Node 称之为“CommonJS 模块”）的支持。这两种模块系统并不完全兼容，因此这有点棘手。...Node 需要在加载模块之前知道该模块是否将使用require()和module.exports，还是将使用import和export。...另一方面，当 Node 将代码文件加载为 ES6 模块时，它必须启用import和export声明，并且不能定义额外的标识符如require、module和exports。...如果您将代码保存在以.cjs*结尾的文件中，那么 Node 将始终将其视为 CommonJS 模块，提供require()函数，并且如果您使用import或export声明，则会抛出 SyntaxError...在这种情况下，null不是合法值。 到目前为止，我们已经讨论了原始类型string、number、boolean、null和void，并演示了如何在变量声明、函数参数和函数返回值中使用它们。
/node_modules/react/react.js，require('./util') 对应的文件是 ./util.js。 根据找到的要导入文件的后缀，使用配置中的 Loader 去处理文件。.../node_modules 中找，再没有就去 ../../node_modules 中找，以此类推，这和 Node.js 的模块寻找机制很相似。 当安装的第三方模块都放在项目根目录下的 ....一套是把 React 所有相关的代码打包好的完整代码放到一个单独的文件中，这些代码没有采用模块化可以直接执行。其中 dist/react.js 是用于开发环境，里面包含检查和警告的代码。.../node_modules/react/react.js 开始递归的解析和处理依赖的几十个文件，这会时一个耗时的操作。...频率出现最高的文件后缀要优先放在最前面，以做到尽快的退出寻找过程。 在源码中写导入语句时，要尽可能的带上后缀，从而可以避免寻找过程。例如在你确定的情况下把 require('.
最后，这个指南不针对某一个特定的打包工具 —— 已经有许多指南来说明如何在配置特定的打包工具。相反我们聚焦于每个库和打包工具（或不用打包工具）都适用的事项。...必要的编译 编译 TypeScript、将 JSX 转换为函数调用 如果库的源码是需要进行编译的形式，如 TypeScript、React 或 Vue 组件等，那么你库需要输出的是编译后的代码。...它做的最重要的两件事是： 定义哪些东西可以从你的库中导入，哪些则不可以，以及可导入的内容的名字。如果没有在 exports 中被列出，那么开发者就不可以 import 或 require 它们。...import 用于当有人通过 import 使用你的库时 require 用于当有人通过 require 使用你的库时 default 字段用于兜底，在没有任何条件匹配时使用。...说明你的库使用哪个许可证 保护你自己和其他的贡献者 开源许可证用于保护贡献者和用户。没有这种保护，企业和有经验的开发者不会使用该项目。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
