Как включить использование запроса и импорта в файле javascript?

У меня есть package.json ниже, я использую пакет и пытаюсь использовать как требование, так и импорт в одном файле; чтобы сделать это, вот что сделал до сих пор, но не работает

Первое испытание

// package.json (v1)
{
  "main": "src/index.js",
  "scripts": {
    "start": "node src/index.js"
  },
  "dependencies": {
    "@xkeshav/day": "latest"
  }
}

и называется, как показано ниже

// src/index.js
const { oneDay } = require("@xkeshav/day");
console.info({ oneDay });
console.info("Hello from template repository");

выше работает нормально


теперь меняется с require на import утверждение

import { oneDay } from "@xkeshav/day";
console.info({ oneDay });

и при запуске файла выдает ошибку

(node:14233) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/recursive/dev/template/src/index.js:1
import { oneDay } from "@xkeshav/day";
^^^^^^

SyntaxError: Cannot use import statement outside a module

выделять

добавьте type:"module" в package.json

так добавлено, как показано ниже

// package.json ( v2 )
{
  "type": "module",
  "main": "src/index.js",
  "scripts": {
    "start": "node src/index.js"
  },
  "dependencies": {
    "@xkeshav/day": "latest"
  }
}

и теперь это работает.


теперь удалено утверждение import и добавлено утверждение require

const { oneDay } =  require("@xkeshav/day");
console.info({ oneDay });

и запустите файл; это выдает ошибку

at /src/index.js:1
const { oneDay } = require("@xkeshav/day");
                   ^

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 '/home/recursive/dev/template/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

Изюминкой является

package.json содержит «type»: «module». Чтобы рассматривать его как сценарий CommonJS, переименуйте его, используя расширение файла «.cjs».

поэтому переименуйте index.js в index.cjs и также внесите изменения в package.json.

// package.json ( v3 )
{
  "type": "module",
  "main": "src/index.cjs",
  "scripts": {
    "start": "node src/index.cjs"
  },
  "dependencies": {
    "@xkeshav/day": "latest"
  }
}

это работает.


импортировать и требовать вместе

теперь добавьте оператор import вместе с require, как показано ниже.

const { oneDay } = require("@xkeshav/day");

import { oneDay as dayOne } from "@xkeshav/day";

console.info({ oneDay, dayOne });
console.info("Hello from template repository");

и при запуске файла; это выдает ошибку

(node:14757) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
at src/index.cjs:3
import { oneDay as dayOne } from "@xkeshav/day";
^^^^^^

SyntaxError: Cannot use import statement outside a module

Выделять

установите «type»: «module» в package.json или используйте расширение .mjs

поэтому переименуйте index.cjs в index.mjs и также запустите package.json

 // # package.json ( v4 )
{
  "type": "module",
  "main": "src/index.mjs",
  "scripts": {
    "start": "node src/index.cjs"
  },
  "dependencies": {
    "@xkeshav/day": "latest"
  }
}

теперь выдает другую ошибку


> @xkeshav/[email protected] start
> node src/index.mjs
at src/index.mjs:1
const { oneDay } = require("@xkeshav/day");
                   ^

ReferenceError: require is not defined in ES module scope, you can use import instead

так как же мы можем использовать оба типа синтаксиса в одном файле? и какое расширение файла будет «.mjs», «.cjs» или «.js», и какие изменения требуются в package.json?

Node этого не поддерживает. Вы можете попробовать другую среду выполнения.

Evert 26.08.2024 20:30

«импортировать и требовать вместе» — зачем вам это делать? Не пишите такой код!

Bergi 26.08.2024 20:36

просто пытаюсь что-то сделать, и я видел, что на некоторых страницах требуется и импортируется и то, и другое; здесь я добавляю тот же пакет, но иногда другой пакет, которого нет в import

xkeshav 26.08.2024 20:37

Вы читали документацию? Они указывают решение.

Bergi 26.08.2024 20:37

«Я видел, что на некоторых страницах есть как требование, так и импорт» — можете ли вы связать их? И почему они это сделали?

Bergi 26.08.2024 20:38

Спасибо за ссылку на документацию, но этот синтаксис не работает в файле js; Нужно ли мне снова менять расширение файла для этого agin?

xkeshav 26.08.2024 20:39

Я видел в некоторой кодовой базе; не помню, но вот ссылка, которую я только что погуглил: linkedin.com/pulse/… ; это может быть неправильно, но разве мы вообще не можем использовать require и import вместе?

xkeshav 26.08.2024 20:41

@xkeshav Так ты сможешь это сделать? Да. Это хорошая идея? Определенно нет. И все же, как они это делают? С помощью транспилятора (веб-пакета), который перезаписывает обе формы в commonjs require перед выполнением кода. Кроме того, next.js, кажется, специально преодолевает некоторые препятствия, чтобы убедиться, что его можно как импортировать (в проекте esm), так и требовать (в проекте commonjs), но это не значит, что это хорошая практика.

Bergi 26.08.2024 20:49

Спасибо. Понял тебя. но можем ли мы сохранить файл .mjs в коде и использовать только import? это хороший способ писать или придерживаться типа и .js?

xkeshav 26.08.2024 21:01

Я не думаю, что есть явный победитель конвенции или популярности. Оба работают. В зависимости от вашей ситуации (например, файл сценария, в котором вы не хотите носить с собой дополнительный package.json, или библиотека, которая объявляет предпочтительную систему модулей), один может быть более подходящим, чем другой; если вам подходят оба, выберите любой.

Bergi 26.08.2024 21:08
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
10
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы использовать require и import в одном файле, вам необходимо обрабатывать их в зависимости от того, используете ли вы модули CommonJS или ES:

Вариант 1: CommonJS (файл .cjs)

  • Используйте require как обычно.
  • Для import используйте синтаксис динамического импорта:
// src/index.cjs
const { oneDay } = require("@xkeshav/day");

(async () => {
  const { oneDay: dayOne } = await import("@xkeshav/day");
  console.info({ oneDay, dayOne });
})();

В package.json установите "type": "commonjs".

Вариант 2: Модуль ES (файл .mjs)

  • Используйте import как обычно.
  • Для require используйте createRequire:
// src/index.mjs
import { oneDay as dayOne } from "@xkeshav/day";
import { createRequire } from "module";
const require = createRequire(import.meta.url);
const { oneDay } = require("@xkeshav/day");

console.info({ oneDay, dayOne });

В package.json установите "type": "module".

Что использовать?

  • Используйте .cjs, если вы предпочитаете CommonJS (require).
  • Используйте .mjs, если вы предпочитаете модули ES (import).

Таким образом, вы можете смешивать require и import в одном файле.

Другие вопросы по теме