医疗整形网站怎么做,网站设计需要哪些技能,视频号直播怎么引流,洛阳网络公司排名前情提要
我们平时使用的npm 第三方包一般基于这两种规范开发的#xff0c;很容易遇到一个项目里既有 CommonJS 又有 ES Module 的情况#xff0c;那么我们应该如何解决这种CommonJS 和 ES Module 混合开发的问题呢#xff1f;
CommonJS是什么#xff1f;
2009年#x…前情提要
我们平时使用的npm 第三方包一般基于这两种规范开发的很容易遇到一个项目里既有 CommonJS 又有 ES Module 的情况那么我们应该如何解决这种CommonJS 和 ES Module 混合开发的问题呢
CommonJS是什么
2009年美国程序员Ryan Dahl创造了node.js项目将javascript语言用于服务器端编程。这标志Javascript模块化编程正式诞生。在服务器端需要有模块与操作系统和其他应用程序互动。CommonJS 是为了提供一个类似PythonRuby和Java标准库让开发者可以使用CommonJS API编写应用程序可以运行在不同的JavaScript解释器和不同的主机环境中。NodeJSwebpack 我们通常会以CommonJS的形式来书写。
CommonJS可以开发以下程序
(1)、服务器端JavaScript应用程序 (2)、命令行工具 (3)、图形界面应用程序 (4)、混合应用程序如Titanium或Adobe AIR
代码形式
通俗大白话特点就是: 使用require关键词来引入依赖举个例子
const path require(path)
const AutoLoad require(fastify/autoload)以及 module.exports
module.exports async function (fastify, opts) {fastify.get(/, async function (request, reply) {return this is an example})
}ES module是什么
ES ModulesESM是用于处理模块的 ECMAScript 标准。 虽然 Node.js 长期使用 CommonJS 标准但浏览器从未有过模块系统。 每个主要决策如模块系统必须首先由 ECMAScript 标准化然后由浏览器实施。
ES modulesESM 是 JavaScript 官方的标准化模块系统。
ES 模块是如何运作的
当使用模块来开发的时候会建立一个模块模块依赖图。不同依赖之间联系来自于你使用的任何 import 语句。
区别
CommonJS 按需加载可以动态加载、条件加载、循环加载ESM 静态加载方便解析依赖优化运行效率。 import() 目前也可以动态加载CommonJS 模块输出值的拷贝ESM输出值的引用。CommonJS 运行时加载ESM编译时输出接口。CommonJS 模块的require()同步加载ESM的import异步加载有独立模块依赖解析阶段。ESM的import会提升变量const只读。
区别举例
在CommonJS中我们可以直接使用__dirname就像下面这样
fastify.register(AutoLoad, {dir: path.join(__dirname, plugins),options: Object.assign({}, opts)})但是在ESM中不再支持我们需要改为
import {dirname} from path;
import { fileURLToPath } from url;function getDirname(url) {const __filename fileURLToPath(url);return dirname(__filename);
}解决方案
方案1按照 ES Module 规范指定 “type”
单独指定某些文件使用 CommonJS 模块或者ES Module 模块
正常情况下我们不做配置的话项目默认是 CommonJS 规范在 package.json 文件中指定 “type”:“module” 后就会按照 ES Module 规范强制的指定文件后缀为 .cjs后此文件会遵守CommonJS 规范 ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a .js file extension and test/package.json contains type: module. To treat it as a CommonJS script, rename it to use the .cjs file extension.
ReferenceError: 在 ES 模块范围中没有定义要求您可以使用 import 代替
这个文件被视为 ES 模块因为它有一个’。Js 的文件扩展名和‘ test/package.json’包含“ type”: “ module”。若要将其视为 CommonJS 脚本请将其重命名为使用’。Cjs 的文件扩展名。“type”:module情况下如何解决这个报错呢
我们可以单独给某个文件设置后缀名来使用CommonJS 脚本强制的指定文件后缀为 .cjs
方案2按照CommonJS 规范不做任何配置情况下
指定需要使用ES Module 的文件的后缀名为 .mjs那么这个文件会被强制指定使用 ES Module 规范
方案3使用 Babel 完美配置 CommonJS 和 ES Module 随心使用(这个目前有更新的配置方案等我忙完了写到方案4方案3也可以用哦)
安装依赖
npm install --save-dev babel-cli babel-preset-env babel-register babel-preset-stage-0
npm install --save babel-polyfill # babel转码时不能识别一些全局对象的API例如Object.assign使用它可以解决这个问题babel-polyfill babel转码时不能识别一些全局对象的APIbabel-preset-stage-0 es阶段性提案语法 stage-0 包含stage1,2,3babel-register 钩子在程序入口文件引入即可实现转码
在根目录新建 .babelrc {presets: [env,stage-0]}配置命令入口在根目录新建 main.js
require(babel-polyfill);
require(babel-register);
require(./app.js); // 引入您的项目的启动文件配置命令行
package.json中加入
scripts: {start: node main.js,},启动项目
npm start
大功告成接下来项目内写任何类型都不会有问题
方案4等我忙完了继续补充确实有更好的方式可以使用更少的依赖
今天就写到这里啦~小伙伴们(ω(ω〃 (ω〃)ゝ我们明天再见啦~~大家要天天开心哦 欢迎大家指出文章需要改正之处~ 学无止境合作共赢 欢迎路过的小哥哥小姐姐们提出更好的意见哇~~
