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

【问题标题】：Node module cross build targets for deployment in npm用于在 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"
]

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

【问题讨论】：

标签： javascript node.js npm webpack node-modules

【解决方案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

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"
},

【讨论】：