不同JS文件的导出/导入事件
不同JS文件的导出/导入事件是指在JavaScript开发中，将一个模块中的变量、函数或类导出到其他模块中使用，或者从其他模块中导入需要的变量、函数或类的过程。
在JavaScript中，可以使用不同的语法来实现模块的导出和导入，常用的有CommonJS、ES6模块和AMD等方式。
- CommonJS：
- ES6模块：
- 概念：ES6模块是ECMAScript 6标准中定义的模块化规范，用于在浏览器端和现代JavaScript环境中异步加载模块。
- 分类：ES6模块通过
export关键字导出模块，通过import关键字导入模块。 - 优势：官方标准，支持异步加载，适用于现代浏览器和前端开发。
- 应用场景：适用于前端开发，构建现代化的Web应用程序。
- 腾讯云相关产品：腾讯云云开发（CloudBase）
- 产品介绍链接地址：腾讯云云开发
- AMD（异步模块定义）：
- 概念：AMD是一种异步模块加载规范，用于在浏览器端异步加载模块。
- 分类：AMD模块通过
define函数定义模块，通过require函数异步加载模块。 - 优势：支持异步加载，适用于浏览器端开发。
- 应用场景：适用于浏览器端开发，特别是在需要异步加载模块的场景。
- 腾讯云相关产品：无
- 产品介绍链接地址：无
总结：不同JS文件的导出/导入事件可以通过不同的模块化规范来实现，包括CommonJS、ES6模块和AMD等。选择适合的模块化规范取决于开发环境和应用场景。腾讯云提供了相应的产品和服务，如云服务器、云函数和云开发，来支持不同的开发需求。
相关·内容
1回答
我有三个文件：
my_function.js
scripts_1.js
scripts_2.js
my_function.js
function myFunction() {
console.log('my function');
}
如何在我的文件scripts_1.js和scripts_2.js中使用这个函数？我在users.js中将这两者用作：
require('scripts_1');
require('scripts_2');
在admins.js中，我只使用一个：
require('scripts_2&
浏览 0提问于2018-11-06得票数 2
回答已采纳
1回答
我有一个与webpack一起设置的react应用程序，并且还希望有一个在节点中运行的脚本来将内容写入输出文件，例如：
script.mjs
import fs from 'fs';
import {SomeClass} from './index.js';
const outputFile= fs.createWriteStream(__dirname + '/output.png');
// Writes into output file
并在package.json中具有以下脚本命令
"scripts": {
...
浏览 4提问于2020-02-06得票数 5
1回答
我最近开始在javascript中使用导入和导出，但我有点困惑。我不太清楚我应该导出什么，以及我应该把什么保存在文件的本地。我不知道如何用英语表达这句好话，下面是我的代码中的一小部分：
/client/js/Inventory.js文件，模块：
import {
$,
renderHTML,
game
} from "../main.js";
const template = {
titanium: {
name: "Titanium",
description: "Description here..."
浏览 0提问于2018-06-27得票数 0
回答已采纳
1回答
我正在开发一个NextJs应用程序，我有一个带有Header.jsx和默认导出Header的头文件夹。
在同一个文件夹中，我有一个包含以下代码的index.js
export * from './Header'
但是如果我使用它，它就会出错。
Attempted import error: '../components/header' does not contain a default export (imported as 'Header').
如果我用这个
import Header from './Header'
exp
浏览 2提问于2020-11-29得票数 0
1回答
我有一个.js文件，它保存了我的应用程序的所有路径：
import i18n from "i18next";
const dashRoutes = [
// ...
{
path: "/user-profile",
navbarName: i18n.t("userProfile"),
component: UserProfile,
layout: "/admin"
},
// ...
export default dashRoutes;
它像这样导入到index.js中：
impo
浏览 1提问于2020-07-31得票数 0
回答已采纳
1回答
我用类型记录创建了react应用程序，并通过axios提出了一个请求。
这是我的原始代码。
// /src/axios.js
import axios from 'axios';
const instance = axios.create({
baseURL:"https://api.baseurl.org",
});
export default instance;
// /src/component.js
import React from "react";
import axios from "./axios"
浏览 2提问于2021-02-12得票数 0
回答已采纳
2回答
我正在尝试创建一个小型npm库，以使与API的接口更加整洁。我的文件夹结构如下..。
dist/
index.js
src/
index.js
endpoints/
endpoint1.js
package.json
webpack.config.js
在我的src/index.js文件中。
import {endpoint1} from './endpoints'
module.exports = class lib {
...
}
当我运行build (运行webpack --显示--显示--错误--详细信息--模式生产)时，webpack抛出了一个
浏览 6提问于2019-11-08得票数 1
回答已采纳
2回答
我有一个react组件，当我尝试分派redux操作时，它会抛出一个错误。以下是组件：
import React from 'react';
import { connect } from 'react-redux';
import { createBook } from './actions/books';
import './InputForm.css';
export class InputForm extends React.Component {
onFormSubmit(event) {
浏览 0提问于2018-02-01得票数 1
回答已采纳
1回答
我使用Webpack，我有一个包含以下代码的function.js文件：
import { randomNum } from '../index.js';
export function getSlidePrev() {
if (randomNum > 1) {
randomNum -= 1;
setBg(randomNum);
}
}
在我的main.js文件中，我有以下内容：
function getRandomNum(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
浏览 14提问于2022-08-22得票数 2
回答已采纳
3回答
今天，我决定制造一个不和谐的RPG机器人，这当然需要个人资料统计，如硬币和实际用户。因此，我搜索了一个，但我遇到了一个问题。当一个公会成员加入并且机器人正在运行时，数据不会保存而不会有任何错误，我不知道为什么会发生这种情况。在bot尝试连接到数据库之后，我尝试通过添加一行console.log(mongoose.connection.readyState)来排除连接状态。这将返回1，这意味着连接很好。我找不到任何其他原因造成这种情况，所以我决定在思考了几个小时后提出一个问题。
(index.js)：连接到数据库
const mongoose = require("mongoose
浏览 13提问于2021-12-24得票数 1
我试图在A.js文件中使用B.js文件中的一个类，我创建了A.js类的一个实例，并试图在B.js中调用它的函数，但我收到了一个错误消息：
Uncaught :无法在模块外使用导入语句
这就是代码的样子：
A.js文件
export class A {
constructor() {
this.name = 'A'
}
getName() {
return this.name;
}
}
B.js文件
import A from './A.js';
const a = new A();
consol
浏览 4提问于2019-10-15得票数 0
2回答
我看到了从ES6中的另一个模块导入代码的两个变体：
import {module} from "./Module"
和
import module from "./Module"
其中module是在文件中定义的ES6类。
Module.js
这两个导入语句的区别是什么？
浏览 3提问于2017-10-07得票数 5
回答已采纳
2回答
我找到了一个代码库来做这件事。
//index.js
export { default } from './Tabs'
export { default as Tab } from './Tab'
//Tab.js
export default class Tab extends Component {
render() => 'Something'
}
这是可以理解的，作者将Tab文件放在一个Tab文件夹下，这样在其他地方他就可以导入'./Tabs‘，但是为什么在index.js中他需要解构？
浏览 1提问于2018-05-07得票数 0
我试图从一个文件中导入一个命名值，然后从另一个文件中按原样导出，但仍然有一些错误。我正在从当前目录中检索它。
export type Homes = { ....
import {Homes} from './api';
我不认为这是相关的，但是，我从js文件导入和从ts文件导出。
浏览 16提问于2019-10-21得票数 1
1回答
我有这样一个文件d3.custom.build.js (简化)：
import { range } from 'd3-array';
import { select, selectAll, event } from 'd3-selection';
import { transition } from 'd3-transition';
export default {
range,
select,
selectAll,
event,
transition
};
像这样的rollup.config.js：
i
浏览 3提问于2016-10-13得票数 12
回答已采纳
/src
|--components
| |--Layout
| | |--AppLayout.js
| | |--Header.js
| | |--Content.js
| | |--Footer.js
| |--Root.js
|--constants
| |-- AppConfig.js
|--index.js
目前，我的react项目结构如下所述。我的问题是如何从AppConfig.js导入Root.js文件中的配置( src文件夹中的兄弟文件夹)，并将其导入AppLayout.js？我试过import APPCONFIG from '../../cons
浏览 6提问于2020-06-16得票数 1
回答已采纳
在modules文件夹中设置redux文件：
\modules
\application
\actions
application.js
index.js
\records
application.js
\reducers
application.js
index.js
我的application记录是一个不可变的记录，它导出缺省值：
import {Record, List, Map, Set, OrderedMap}
浏览 0提问于2019-12-31得票数 0
回答已采纳
我可以将我的package.json设置为对CJS和ESM使用不同的导入： "main": "dist/cjs/index.js",
"module": "dist/esm/index.js", 我还可以设置我的TypeScript编译器来创建两个发行版： // for ESM
{
"compilerOptions": {
"module": "es2020",
"target": "es2015",
"d
浏览 40提问于2021-08-26得票数 2
我正在尝试为我的项目将我的第二个文件导入App.js。我得到的错误是“开发服务器返回响应错误代码: 500”。基本上说“无法从”App.js中解析"App.js“。
为什么会发生这种情况？我相信这是正确的，但由于某种原因，这个bugfest说文件不存在。第一个代码是我的App.js文件，第二个代码是我试图导入的代码。
import React from 'react';
import MainFile from './components/MainFile';
export default class App extends React.Comp
浏览 5提问于2019-01-19得票数 1
回答已采纳
1回答
我的index.js文件有很多代码，可以分成很多部分。
基本上看起来是这样的：
importing many dependencies;
importing many custom functions;
defining constants;
setting up express;
setting up apollo-server;
post-request #1
get-request #1
requests....
app.listern on port
我希望我的index.js文件只包含导入
要做到这一点，我已经将我的代码分成了许多.js文件。大多数文件没有导出任何内容，但表示
浏览 3提问于2017-12-05得票数 1
回答已采纳
11回答
这似乎是显而易见的，但我发现自己对何时使用花括号导入ES6中的单个模块感到有点困惑。例如，在我正在处理的React-原住民项目中，我有以下文件及其内容：
文件initialState.js
var initialState = {
todo: {
todos: [
{id: 1, task: 'Finish Coding', completed: false},
{id: 2, task: 'Do Laundry', completed: false},
{id: 2
浏览 9提问于2016-04-22得票数 1080
回答已采纳
如何将在jsx文件中定义的react组件捆绑到index.js文件中？
以组件可以被import module from "/module"; let C = module.Component;访问的方式。
通过以下方式：
/module
index.js
Component.jsx
浏览 0提问于2016-06-03得票数 4
回答已采纳
我有个问题。我是node.js的初学者，我知道我们将服务器代码重构为不同的文件(如index.js、server.js、routes.js等)，以使代码库更易于管理，代码更易读。
然而，我的高年级学生告诉我，我们将代码拆分到不同的文件中，这样节点js就可以为每个文件生成一个单独的进程，并且几个并发的代码同时运行。
这个逻辑对我来说有点难理解，我认为nodejs是单线程的，我们可以使用setTimeout/答应将异步任务发送到事件队列。我的理解是，一旦我们使用了require语句，代码就会直接导入到导入它的地方。
我的理解错了吗？
浏览 11提问于2022-08-04得票数 1
回答已采纳
我正在努力尝试在Javascript (位于leaflet-m2t.js文件中)中导入类，是否有错误不断抛出m2t未定义。文件导入正常，错误不在文件中，而是在我的代码中。我希望在解决这个问题方面能有所帮助。
require('./leaflet-m2t.js')
$scope.tileProvider = new m2t.tileProvider({
map: map,
tileUrl: '/m2t',
defaultLayer: 'Dark',
tileLayers: [],
outlineLayers:
浏览 35提问于2017-07-24得票数 0
回答已采纳
2回答
我有这两份文件：
foo1
const a = 2;
export {a};
和
foo2
import a from "./foo1.js";
console.log(a);
这两个文件都是带有html的模块文件：
<script src='./scripts/foo2.js' type='module'></script>
<script src='./scripts/foo1.js' type='module'></script>
一旦脚本运行，
浏览 4提问于2021-09-06得票数 0
回答已采纳
我已经用rollup创建了一个React库，但是，我有大量导出的组件，因此文件大小相对较大。
因此，在我导入该库的项目中，执行以下操作；
import { ComponentExampleOne, ComponentExampleTwo } from 'my-react-library';
它导入通过rollup输出的整个索引文件(包括所有其他组件和任何第三方依赖项)，所以当用户第一次点击上面的导入页面时，他们需要下载整个文件，这比我希望的要大得多。
对于像lodash这样的我只想访问单个函数而不是整个库的程序，我将执行以下操作；
import isEmpty from
浏览 17提问于2020-06-05得票数 1
回答已采纳
2回答
我有一个LWO格式的3D文件。我已经看到，我们可以使用三个js加载3D文件(.obj格式)，使用的是它的OBJLoader.js OBJMTLoader.js。我已经看到了最新的三个js版本的'loaders‘目录，但是找不到任何可以加载.lwo 3D文件的东西。有没有办法用三个js来加载3DLWO文件？
浏览 3提问于2015-02-12得票数 1
1回答
考虑到我有两个带有大量命名导出的导入(太多，无法全部写出)，我希望将这些导入重新导出，但其中的几个除外。在我的例子中，这是因为一些出口发生了碰撞。
作为我想要存档的一个例子，让我们假设我们有两个文件：
foo.js
export const a = 1;
export const b = 2;
bar.js
export const b = 1;
export const c = 3;
如果我想使用CommonJS聚合和再导出它们，我可以这样做：
/* use rest destructuring to put everything except "b" into variab
浏览 4提问于2022-06-03得票数 1
当我有3个文件，每个文件都包括前一个文件时，我在理解导出/导入机制时遇到了一些问题。
示例：
//fileA.js:
export default MyClass {}
//fileB.js:
import MyClass from './fileA.js';
//fileC.js:
import './fileB.js';
我的期望是MyClass可以在fileC中使用，但看起来情况并非如此。你能给点建议吗？
浏览 0提问于2018-08-26得票数 2
回答已采纳
1回答
可以让一个JS文件导入来自另一个js文件的所有导入吗？我想为我的react应用程序设置一组导入，仅当应用程序处于开发模式时才导入，并且我想将这些导入存储在dev-config.js文件中，您有什么想法吗？
浏览 0提问于2020-06-09得票数 0
1回答
我有两份文件：
app.js
module.js
app.js会有表达，
import 'foo' from './module'
//use foo..
module.js会有，
export default {expression}
但这是行不通的。我目前正在使用babel-loader和es2015预置的Node 7.0.0，尝试使用Webpack和es2015预置，但无法工作。
浏览 3提问于2016-11-13得票数 4
回答已采纳
我是节点和MongoDB的新手，也是编码的新手。我正在做一个项目，在这个项目中我创建文档并将它们存储在MongoDB中。我在用猫鼬做这些东西。早些时候，我将所有的models和schemas都放在app.js文件中。我还可以使用findOne()或find()方法检索was应用程序中使用模式存储的数据。
但最近，我将所有模式和模型移到另一个名为model.js的文件中。我还要求我的所有模型都在我的app.js文件中。
但是，当我试图使用定义的模型和模式检索app.js中的所有数据时，我现在还不能这么做？
下面是两个文件app.js的代码
// Load Models and Schemas
v
浏览 14提问于2020-05-17得票数 1
3回答
为什么不能在默认对象中导出函数
、、、、
我想知道为什么这对使用create-react-app创建的应用程序无效
/***** myLib.js *****/
const multiplyByTwo = val => val * 2;
export default { multiplyByTwo };
也不：
/***** myLib.js *****/
let multiplyByTwo = val => val * 2;
export default { multiplyByTwo };
两者均未：
/***** myLib.js *****/
function multiplyByTwo(val) { retu
浏览 1提问于2019-01-14得票数 0
回答已采纳
1回答
我在想，如果我从另一个文件导入一个函数，我是否也导入了该函数文件中导入的所有文件？例如：
auth.js
import React from 'react';
import { AsyncStorage, View, Text, ScrollView, ... } from 'react-native';
import ModuleA from './modules/ModuleA';
import ModuleB from './modules/ModuleB';
import Module99 from './modu
浏览 0提问于2018-11-03得票数 2
回答已采纳
1回答
我有一个我无法解决的问题。我正在使用node.js，我只想在另一个文件中使用导出路由器功能。
以下是导入文件中的代码：
import express from "express";
import * as zoneInstance from "../../controllers/objectInstance/zoneInstance.js";
import { mobilityRouter } from "../../controllers/routerFunction/routerLogic.js";
const router = expre
浏览 0提问于2021-06-22得票数 0
回答已采纳
问题
有许多关于这个主题的帖子，但我仍然不确定JS导入的最佳实践。
样式指导冲突
谷歌风格指南建议以下方法是“好的”
import * as goog from '../closure/goog/goog.js';
AirBNB Style Guide 明确声明不使用通配符。
当我查看一些受人尊敬的JS开发人员时，观察看到他们使用通配符。最初，我怀疑这是为了命名空间或别名目的，但我经常看到这种类型的示例。
import * as debounce from 'lodash/debounce.js'
我能想象到的唯一原因是可维护性，即退欧将保持与导出无关，而且在这
浏览 3提问于2021-06-15得票数 0
回答已采纳
1回答
所以我有一个错误，我不知道它是从哪里来的：
我试着找出HeaderSegment在哪里，但它并不存在于我的项目中，我没有-
import HeaderSegment from './example.js'
我在google上做了通常的搜索，但这些答案中的问题是，我没有任何导入模块，即HeaderSegment.我使用的是React本机、Admob和Firebase，而且我也不知道错误在哪里，所以在这里，我尝试删除，然后删除node_modules，然后安装npm，但是不好，这里是堆栈：
(当然，这不起作用)我知道很难回答这个问题，因为涉及到的两个文件是hea
浏览 1提问于2021-03-15得票数 1
回答已采纳
2回答
我正在学习react，并使用官方网站React 中的github存储库
我已经按照指示开始编辑所提供的App.js。
在我的App.js文件中，我创建了一个Todo类，并使用#container id在DOM上呈现它。
下面是App.js文件：
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
浏览 1提问于2016-09-05得票数 1
回答已采纳
1回答
我正在学习如何在Vanilla Javascript中测试Javascript代码，所以我正在遵循一个教程。我的项目结构如下：
Modules/File.js，File2.js (每个文件包含一个我想测试的函数)app.js(用于测试的文件与test.js file)index.htmlindex.js一起工作)(根据tutorial)test.js (我描述测试的地方)，目前我保留主要代码there)test.html (我使用它来运行测试)
我希望能够从File.js和app.js中的File2.js导入函数，这样我就可以运行测试了。我怎样才能做到这一点？我使用的是es6模块的导入/导出。
浏览 4提问于2021-06-02得票数 1
我有两个文件: file A.js：
export default={
name:"sample"
}
文件B.svelte：
import {name} from './A';
错误:名称不是从A.js导出的
浏览 1提问于2022-02-22得票数 1
我试图在notifications.js中导入App.jsx文件，但是它没有工作，我使用的是React和Vite。
我尝试在App.jsx中使用导入"./ notifications“，在App.jsx文件中我使用了标记名称通知。我希望查看notifications.js中的数组。
浏览 89提问于2022-11-23得票数 -1
我已经修改了这个问题，以帮助人们理解我在寻求什么帮助。我有一个目录树如下所示：
--action
--a.js
--b.js
--c.js
--d.js
--data
--list.js
--export
--exp.js
文件js: a、b、c、d都具有如下功能：
module.export = {
"test": function name () {
//do something
}
}
在list.js文件中。我有这样的阵列。
const list = [ 'a', 'b' ];
在exp.js文件中
浏览 6提问于2021-06-19得票数 2
我正在尝试将一个文件导入到TypeScript中，它基本上就是一个放在标签中的js文件。我试过几种不同的方法。 // global.d.ts
declare module 'myfile.js' 在react文件内部： // component.tsx
import { foo } from '../lib/myFile.js' // This is saying it is not a module 在js文件内部，它看起来像这样几次，所以不确定我需要如何引用该文件： (function( something ) {
something.Foo =
浏览 57提问于2021-08-01得票数 1
回答已采纳
当在JavaScript中导入文件时，该操作是否会导致导入文件中的变量范围变成导入文件的作用域，从而避免了在导入文件中声明第二个导入声明的必要性？
例如，如果首先加载它：
/* Config.js */
import { ImportantVar, OkayVar, LastVar } from 'first/file/path.js';
import DataObject from 'second/file/path.js';
然后这是装载的：
/* Second File */
export const DataObject = function( para
浏览 4提问于2022-04-24得票数 0
回答已采纳
我一直在努力在另一个文件中销毁我的mongo对象，我的对象结构如下所示。
const env = {
project: 'CRIBBBLE BACKEND',
url: 'localhost',
api: {
url: 'https://api.dribbble.com/v1/',
},
port: parseInt(process.env.PORT, 10) || 3000,
mongo: database,
};
export def
浏览 5提问于2017-12-02得票数 2
回答已采纳
1回答
我有一个导出动作的actions.js文件，如下所示
export var toggleTodo = (id) => {
return {
type: 'TOGGLE_TODO',
id
}
}
但是当我使用es6 import导入它时，我得到了错误
Uncaught TypeError: Cannot read property 'toggleTodo' of undefined
但是当我使用普通的js请求它的时候，它工作得很好！谁能给我解释一下为什么会发生这种情况，我是说我读到这两件事是一样的…似乎有什么不同了？
// var
浏览 1提问于2016-11-23得票数 7
回答已采纳
我是js和react的新手，所以：
我尝试导出js函数：
App.js：
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { render } from 'react-dom';
import { LazyLog } from 'react-lazylog';
import 'bootstrap/dist/css/bootstrap.min.css';
import {
浏览 14提问于2019-11-11得票数 0
回答已采纳
有没有一种使用ES6或ES7或babel的语法，可以让我轻松地将许多组子文件捆绑在一起？
例如，给定：
./action_creators/index.js
./action_creators/foo_actions.js
./action_creators/bar_actions.js
让index.js导入foo和bar操作，然后重新导出它们，这样我就可以
import {FooAction, BarAction} from './action_creators/index.js'
如果我要更改对象本身所组织到的文件，我不想记住/更改引用。
浏览 0提问于2016-06-28得票数 82
回答已采纳
我正在尝试使用来自的里程计作为Svelte中的一个组件。
然而，我看到了下面的错误。
Svelte组件
<script>
// Trying to use Odometer from https://github.com/HubSpot/odometer within Svelte
// Have added export Odometer to js from Github in Odometer.js component above
import Odometer from 'Odometer.js';
浏览 9提问于2022-10-29得票数 0
1回答
试图运行npm，但无法找到文件context.js
使用它来调用上下文
import { AccountContext } from '../context.js'
这是我的context.js文件
import { createContext } from 'react' export const AccountContext = createContext(null)
我漏掉了什么装置吗？
浏览 4提问于2022-03-20得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
