网站建设基本流程图,什么叫网站地图,免费漫画大全免费版,关键词优化网站排名文章目录环境导入相关main 和 modulewebpack resolve.mainFieldsbrowserexports定义其他模块根据导入语句导出嵌套环境导出vue中 exports 用法自定义运行环境环境导入相关
main 和 module
根据导入模块时不同的模块规范语句查找不同的入口文件
main: dist…
文章目录环境导入相关main 和 modulewebpack resolve.mainFieldsbrowserexports定义其他模块根据导入语句导出嵌套环境导出vue中 exports 用法自定义运行环境环境导入相关
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/clientif (typeof window undefined) {console.log(server)
} else {console.log(client)
}exports
约定包中导出的路径不能引入未在 exports 中定义的模块优先级最高若存在 exports 会忽略 main 等字段webpack 中 resolve.conditionNames 可配合此字段进行导出设置同理 resolve.mainFields 会失去效果
{// 表示该包仅存在默认导出默认导出为 ./index.jsexports: ./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 --conditionscustom src/index.js
