标签: commonjs

在反应文档中,我发现了这种导入PureRenderMixin的方法

var PureRenderMixin = require('react/addons').addons.PureRenderMixin;

如何以ES6风格重写.我唯一能做的就是:

import addons from "react/addons";
let PureRenderMixin = addons.addons.PureRenderMixin;

我希望有更好的方法.

我已经阅读了很多关于AMD解决方案的文章,例如在Javascript中遵循CommonJS风格的RequireJS或模块加载器.

假设我在这部分中分割了一个应用程序:

• 应用程序定义依赖于我使用的框架
• 模型1依赖于App定义和框架
• 模型2依赖于App定义,模型1和我的框架

我可以将每个部分编写为RequireJS模块或常见的JS模块,并将我的项目分成我想要的文件数量,但将每个部分编写为模块或将它们拆分为多个文件然后按正确顺序加载它们的优点是什么(为了避免依赖问题)可能将大文件中的所有文件连接起来以减少HTTP请求(由r.js优化器完成)？

我想知道如何在Play Framework 2.3+中使用CommonJS模块？

我想一个Browserify插件可以用类似于sbt-less插件的方式编写,但在开始之前我想知道其他人是如何处理它的.

在play框架构建过程中是否已经有一种方法可以使用Browserify？

公开节点包模块的标准方法是将它们列在index.ts中，如下所示：

export * from './module1';
export * from './module2';

但是，这会立即加载两个模块的内容。我想要一个未在 index.ts 文件中导出的模块，因为它需要安装一些可选的依赖项。

我遵循了本指南：https://blog.mozilla.org/data/2021/04/07/this-week-in-glean-publishing-glean-js/

我的package.json：

  "exports": {
    ".": {
      "import": "./dist/es/index.js",
      "require": "./dist/cjs/index.js"
    },
    "./module2": {
      "import": "./dist/es/module2.js",
      "require": "./dist/cjs/module2.js"
    }
  },
  "typesVersions": {
    "*": {
      ".": [
        "./dist/types/index.d.ts"
      ],
      "./module2": [
        "./dist/types/module2.d.ts"
      ]
    }
  },
// fallback for older Node versions:
  "module": "dist/es/index.js",
  "main": "dist/cjs/index.js",
  "types": "dist/types/index.d.ts",

在我构建项目后（使用tsc，分别用于 CJS 和 ESM），输出目录结构如下所示：

- dist
  - cjs
    - index.js
    - module2.js
  - es
    - index.js
    - module2.js
  - types …

问题：

如何使用项目根目录中的文件路径在 NodeJS 中导入 JavaScript 文件？（而不是相对文件路径）

换句话说，我的团队正在尝试从语法样式 A过渡到语法样式 B（如下所示）：

语法风格A

const source = require(\'../../../../../../source.js\');\n

语法风格 B

const source = require(\'src/source.js\'); // "src" is a direct subfolder of the project root\n

我已经审阅了很多关于这个主题的帖子，但没有一个能够满足我的项目的要求......

项目要求：

\n
• 要求#1：没有外部包（例如 Babel.js 或 Webpack），因为磁盘空间有限。另外，我们无法使用“npm install”安装任何东西。
\n
• 要求#2：JavaScript 文件应该能够使用“项目根”文件路径而不是相对文件路径导入另一个 JavaScript 文件。（这将避免诸如“../../../../../../../script.js”之类的长相对路径，这可能会变得难以管理。）
\n
• 要求#3：在源代码中的任意位置右键单击导入的类应该会弹出一个上下文菜单，其中包含“转到声明”选项（这将我们直接带到导入的文件）。此外，将 JavaScript 文件移动到 IDE 中的其他文件夹应该会自动更新所有引用。我们可以使用任何IDE。
\n
• 要求#4：为了采用一致的方式导入脚本，我们将使用 NodeJS 的“require”关键字进行导入（而不是 JavaScript 的“import”关键字）。
\n

设置：

以下是我的设置。Package.json是由WebStorm生成的，我没有更改它。

我安装了package.json这样的reactjs和react-dom

"dependencies": {
   "bootstrap": "^v4.1.1",
   "popper.js": "^1.14.3",
   "react": "^v16.4.1",
   "react-dom": "^16.4.1"
}

它正确下载了react文件夹和react-dom文件夹。

这两个文件夹都有cjs和umd文件夹，并且它们都有很多js文件。

对我来说，无法找到两个文件夹中文件之间的差异。

像这样：

URL: node_modules/react/umd
  react-development.js
  react-production.min.js



URL : node_modules/react/cjs
   react-development.js
   react-production.min.js

与react-dom几乎相同。它还具有cjs和umd文件夹，我不知道应该使用哪个文件夹中的哪个文件来开发React应用程序或网站。

我正在开发一个依赖于仅 ESM 库的包：unified，并且我将我的 npm 包公开为 CommonJS 库。

当我在应用程序中调用我的包时，节点给出了以下错误消息：

不支持 ES 模块 node_modules\unified\index.js 的 require()

错误消息很明显，因为我们不允许使用requireESM 模块，但我不是已经告诉 Typescript 将源代码编译为 CommonJS 格式吗？

参考：

1. ESM 与 CommonJS
2. 如何为 ESM 和 CommonJS 创建混合 NPM 模块

在 Nodejs 后端项目中使用 ES 模块相对于 CommonJS 模块是否有性能优势或劣势？我问这个问题是因为我看到很多人仍然使用 CJS，即使较新版本的 NodeJS 完全支持 ES 模块。

建立:

• BabelJS(es2015,反应,阶段-1)
• 的WebPack
• React/redux

CommonJS和ES6的新功能.我知道对象实例和方法的静态容器之间的区别,但我不确定它们在分离到模块时的行为方式.所以我想知道返回一个实例之间的区别是什么(这个模式是否有效？):

// StateParser.js

class StateParser {
    constructor() {
     }

     method1() {
        ...
     }

}

export default new StateParser()

并导出const方法:

// StateParser.js

let state = {
}

export const method1 = () => { ... }

1. 方法A:每次导入时都会有新的实例吗？

2. 方法B:使用对象解构的能力之一是:

   import { method1 } from '../utils/StateParser.js';
   

   Run Code Online (Sandbox Code Playgroud)

   然后使用method1,就好像它存在于本地？

3. 方法A:在构造函数中初始化状态的能力有哪些好处？

所以基本上我不确定何时使用哪个实用程序类,并希望您的输入.

您可以在这里查看我的示例项目：https://github.com/DanKaplanSES/typescript-stub-examples/tree/JavaScript-import-invalid

我创建了这个名为 main.ts 的文件：

import uuid from "uuid";\n\nconsole.log(uuid.v4());\n\n

虽然打字稿适合这种导入，但当我尝试node main.js，它会给出以下错误：

console.log(uuid_1["default"].v4());\n                              ^\n\nTypeError: Cannot read property \'v4\' of undefined\n    at Object.<anonymous> (C:\\root\\lib\\main.js:5:31)\n\xe2\x86\x90[90m    at Module._compile (internal/modules/cjs/loader.js:1063:30)\xe2\x86\x90[39m\n\xe2\x86\x90[90m    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)\xe2\x86\x90[39m\n\xe2\x86\x90[90m    at Module.load (internal/modules/cjs/loader.js:928:32)\xe2\x86\x90[39m\n\xe2\x86\x90[90m    at Function.Module._load (internal/modules/cjs/loader.js:769:14)\xe2\x86\x90[39m\n\xe2\x86\x90[90m    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)\xe2\x86\x90[39m\n\xe2\x86\x90[90m    at internal/main/run_main_module.js:17:47\xe2\x86\x90[39m\n

如果我将文件更改为此，它会正常执行：

console.log(uuid_1["default"].v4());\n                              ^\n\nTypeError: Cannot read property \'v4\' of undefined\n    at Object.<anonymous> (C:\\root\\lib\\main.js:5:31)\n\xe2\x86\x90[90m    at Module._compile (internal/modules/cjs/loader.js:1063:30)\xe2\x86\x90[39m\n\xe2\x86\x90[90m    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)\xe2\x86\x90[39m\n\xe2\x86\x90[90m    at Module.load (internal/modules/cjs/loader.js:928:32)\xe2\x86\x90[39m\n\xe2\x86\x90[90m    at Function.Module._load (internal/modules/cjs/loader.js:769:14)\xe2\x86\x90[39m\n\xe2\x86\x90[90m    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)\xe2\x86\x90[39m\n\xe2\x86\x90[90m    at internal/main/run_main_module.js:17:47\xe2\x86\x90[39m\n …