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

Question

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

构建目标

1. 像 Vue 这样的 ES6 环境。
2. Commonjs 像节点后端或一些 webpack 构建。
3. 浏览器，脚本标签。

项目目录结构

---

源代码

--Dog.js

index.js

包.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"
]

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

Answer 1

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

Answer 2

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

项目目录结构

---

源代码

--Dog.js

距离

--dog.common.js

--dog.lib.min.js

index.js

包.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格式
• 用于浏览器的 unpkg
• files 告诉 npm 要上传哪些文件

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