用于在 npm 中部署的节点模块交叉构建目标

Posted 2023-03-08

【中文标题】用于在 npm 中部署的节点模块交叉构建目标

【英文标题】：Node module cross build targets for deployment in npm

【发布时间】：2020-07-16 15:19:47

【问题描述】：

我有我想要构建以针对不同环境的 ES6 模块。我不知道该怎么做，或者我应该使用 webpack 还是 rollup。

构建目标

Vue 等 ES6 环境。 Commonjs，如节点后端或一些 webpack 构建。 浏览器，脚本标签。

项目目录结构

---

src

--Dog.js

index.js

package.json

---

项目文件

狗.js

class Dog
  //Typical Dog stuff

export default Dog;

index.js

import Dog from "./src/Dog";
export 
  Dog

webpack.config.js

module.exports = 
  target: 'node',
  mode: 'production',
;

package.json（相关部分）

"files": [
  "dist",
  "src"
]

有什么方法可以使这个过程自动化，还是我应该手动为每个目标编写一个新库？如果导入我的模块的项目如何知道哪个构建适合他们的环境？

【参考方案1】：

只需为不同的环境和目标使用不同的 webpack 配置。这是一种常见的方法。

【讨论】：

如果我知道该怎么做，我不会问它。以及导入 mine 模块的项目如何知道哪些构建适合他们的环境？我已经看到这是用 package.json 的 main: "..." 完成的，但是其他环境呢

【参考方案2】：

这就是我认为它适用于最小的 webpack 配置。 dist 文件夹及其内容由 webpack 创建。

项目目录结构

---

src

--Dog.js

距离

--dog.common.js

--dog.lib.min.js

index.js

package.json

webpack.config.js

---

webpack.config.js

const path = require("path");

var commonJsConfig = 
  target: 'node',
  mode: 'production',
  output: 
    path: path.resolve(__dirname, 'dist'),
    filename: 'dog.common.js',
    libraryTarget: 'commonjs'
  
;

var browserConfig = 
  target: 'web',
  mode: 'production',
  output: 
    path: path.resolve(__dirname, 'dist'),
    filename: 'dog.lib.min.js'
  
;

module.exports = [commonJsConfig, browserConfig];

package.json（相关部分）

main 告诉后端和 webpack 遗留项目使用 commonjs 格式。 模块为es6格式 为浏览器解包 files 告诉 npm 要上传哪些文件

"main": "dist/dog.common.js",
"module": "index.js",
"unpkg": "dist/dog.lib.min.js",
"files": [
  "dist",
  "src"
],
"scripts": 
  "build": "webpack"
,