如何配置实现项目内直接通过'assets'导入公共资源模块

这个导入需求完全可以实现，你目前的配置缺两个关键环节：一是没有给assets目录配置模块解析别名，二是缺少统一的入口文件，需要额外添加index.js作为模块出口。

Node.js和前端构建工具的默认模块解析逻辑，只会把node_modules下的目录识别为可直接通过包名导入的模块，你在项目内部自定义的assetsFolder，哪怕配了name字段的package.json，也不会被自动纳入模块搜索路径，所以直接写import 'assets'会报模块不存在的错误。

• 第一步：在assetsFolder根目录新增index.js作为模块入口
  这个文件负责统一对外暴露目录下的资源，同时支持你需要的两种导入语法，参考代码如下：

  // 提供默认导出，适配 import images from 'assets' 写法
  export { default as default } from './images.js'
  // 提供命名导出，适配 import { colors, images } from 'assets' 写法
  export { default as colors } from './colors.js'
  export { default as images } from './images.js'
  export { default as someOtherFile } from './someOtherFile.js'
  export { default as GlobalStyles } from './GlobalStyles.js'
  

  你可以根据实际需求调整默认导出的内容，不一定非要导出images。
• 第二步：配置路径别名，将assets映射到实际的assetsFolder目录
  根据你使用的工具链选择对应配置即可，所有配置都需要使用绝对路径指向assetsFolder的实际位置：
  • Webpack项目：修改webpack.config.js的resolve配置

  const path = require('path')
  module.exports = {
    // 其余配置省略
    resolve: {
      alias: {
        assets: path.resolve(__dirname, 'sourceFolder/assetsFolder')
      }
    }
  }
  

  • Vite项目：修改vite.config.js的resolve配置

  import { defineConfig } from 'vite'
  import path from 'path'
  export default defineConfig({
    // 其余配置省略
    resolve: {
      alias: {
        assets: path.resolve(__dirname, 'sourceFolder/assetsFolder')
      }
    }
  })
  

  • 适配编辑器路径提示、TypeScript/JavaScript语言服务：在项目根目录新增/修改jsconfig.json（JS项目）或tsconfig.json（TS项目）

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "assets": ["sourceFolder/assetsFolder"]
      }
    }
  }
  

  • 无构建工具的纯Node.js环境（Node 12+版本支持）：修改项目根目录的package.json，添加imports字段

  {
    "imports": {
      "assets": "./sourceFolder/assetsFolder/index.js"
    }
  }
  

配置生效后，你在sourceFolder下任意深度的文件中，都可以直接使用两种目标写法导入资源，不需要再写多层级的相对路径：

// 导入默认导出的资源
import images from 'assets'
// 按需导入命名导出的资源
import { colors, images, GlobalStyles } from 'assets'

补充说明：如果你不想添加index.js，也可以通过别名直接导入子文件，比如import images from 'assets/images.js'，但添加index.js做统一出口是前端工程里的通用规范，后续维护、调整资源路径时只需要修改index.js即可，不需要改动业务代码里的导入语句。

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