如何在在线IDE Replit中运行多个JavaScript文件

功能支持性 #

Replit完全支持在单个项目中管理、运行多个JavaScript文件，Node.js后端环境与前端浏览器运行环境均适配该需求。

具体操作步骤 #

场景1：Node.js后端项目 #

• 创建项目时选择「Node.js」模板完成初始化
• 在左侧文件栏新建多个JS文件，例如工具函数文件utils.js、配置文件config.js、主入口文件index.js
• 在非入口文件中导出需要被外部调用的内容，示例：

  // utils.js 内容示例
  function formatTime(timestamp) {
    return new Date(timestamp).toLocaleString()
  }
  module.exports = { formatTime }
  

• 在入口文件中导入其他JS文件的内容，完成业务逻辑编写，示例：

  // index.js 内容示例
  const { formatTime } = require('./utils.js')
  console.log(formatTime(Date.now()))
  

• 点击顶部「Run」按钮即可运行，Replit会默认执行入口文件并自动关联所有导入的JS文件
• 如需修改默认入口，可编辑根目录下的.replit配置文件，将run = "node index.js"中的index.js替换为自定义的入口文件路径即可

场景2：前端浏览器运行项目 #

• 创建项目时选择「HTML」模板完成初始化
• 在左侧文件栏新建多个JS文件，例如公共方法文件common.js、页面逻辑文件home.js
• 在index.html的<body>标签末尾按依赖顺序引入所有JS文件，示例：

  <!-- 先引入公共依赖文件 -->
  <script src="./common.js"></script>
  <!-- 再引入业务逻辑文件 -->
  <script src="./home.js"></script>
  

• 点击顶部「Run」按钮即可启动预览页，所有引入的JS文件会按标注顺序执行

注意事项 #

• 导入同目录下的自定义JS文件时必须添加./前缀，否则会被Replit识别为npm第三方包，触发模块找不到的报错
• 如需使用ES Module语法（import/export），需要在项目package.json中添加"type": "module"配置，或者将JS文件后缀修改为.mjs

内容的提问来源于stack exchange，提问作者Pabel Miah