环境导入相关

main 和 module

• 根据导入模块时不同的模块规范语句查找不同的入口文件

"main": "dist/vue.runtime.common.js", // cjs引入
"module": "dist/vue.runtime.esm.js",  // esm引入

• cjs：“node_modules/vue/dist/vue.runtime.common.js”
• esm：“node_modules/vue/dist/vue.runtime.esm.js”

当 main 和 module 都不存在时 ，会去查找项目的index.js入口文件

webpack resolve.mainFields

通过webpack自定义查找规则

• webpack 在 target: web 的情况下 ，mainFields 字段默认为 [‘browser’, ‘module’, ‘main’] 。

browser

• 针对于浏览器环境下的入口文件定义字段。

"browser": "./lib/browser/main.js"

配合webpack使用

mainFields: ['browser', 'module', 'main'],

• map结构进行条件映射

 "browser": {"./src/server.js": "./src/client.js"，// 浏览器环境下会映射路径"./src/server.js": false, // 如果是浏览器环境下不会将该包的 /src/server.js 模块内容打包进去},

// 在浏览器环境下会被映射成 import server from './src/client'
import server from './src/server'
import client from './src/client'if (typeof window === 'undefined') {console.log(server)
} else {console.log(client)
}

exports

• 约定包中导出的路径，不能引入未在 exports 中定义的模块
• 优先级最高，若存在 exports 会忽略 main 等字段
• webpack 中 resolve.conditionNames 可配合此字段进行导出设置，同理 resolve.mainFields 会失去效果

{// 表示该包仅存在默认导出，默认导出为 ./index.js"exports": "./index.js"
}// 上述的写法相当于
{"exports": {".": "./index.js"}
}

// Error
// 此时控制台会报错，找不到该模块(无法引入在 exports 未定义的子模块路径)
import x from 'x/src/server.js'// correct
import x from 'x'

定义其他模块

  "exports": {".": "./index.js",// 同时额外定义一个可以被引入的子路径// 可以通过 import x from 'x/submodule.js' 进行引入 /src/submodule.js 的文件"./submodule.js": "./src/submodule.js"}

根据导入语句导出

// package.json
{"exports": {// ESM 引入时的入口文件"import": "./index-module.js",// CJS 方式引入时寻找的路径"require": "./index-require.cjs","default":"xxx"},
}// 相当于
{"exports": {"import": {".":  "./index-module.js"},"require": {".": "./index-require.cjs"},"default":"xxx"},
}

或者

{"exports": {".": "./index.js","./feature.js": {"import": "./feature-node.js","default": "./feature.js"}}
}

嵌套环境导出

{"exports": {"node": {"import": "./feature-node.mjs","require": "./feature-node.cjs"},"default": "./feature.mjs"}
}

其他环境

• “types”- typescipt 可以使用它来解析给定导出的类型定义文件
• “deno”- 表示 Deno 平台的关键 key。
• “browser”- 任何 Web 浏览器环境。
• “development”- 可用于定义仅开发环境入口点，例如提供额外的调试上下文。
• “production”- 可用于定义生产环境入口点。必须始终与 互斥"development"。

vue中 exports 用法

// ...
"exports": {".": {"import": {"node": "./index.mjs","default": "./dist/vue.runtime.esm-bundler.js"},"require": "./index.js","types": "./dist/vue.d.ts"},"./server-renderer": {"import": "./server-renderer/index.mjs","require": "./server-renderer/index.js"},"./compiler-sfc": {"import": "./compiler-sfc/index.mjs","require": "./compiler-sfc/index.js"},"./dist/*": "./dist/*","./package.json": "./package.json","./macros": "./macros.d.ts","./macros-global": "./macros-global.d.ts","./ref-macros": "./ref-macros.d.ts"}// ...

自定义运行环境

• 在运行 NodeJs 脚本时可以通过 --conditions 标志添加自定义用户条件

// 此时运行环境变成了custom，可以在exports中设置custom字段进行条件导出
node --conditions=custom src/index.js