Узлы кросс-сборки для развертывания в npm

Question

У меня есть модуль ES6, который я хочу построить для различных сред. Я не знаю, как это сделать, или мне следует использовать веб-пакет или накопительный пакет.

Создание целей

1. ES6 среды, такие как Vue.
2. Common js как серверная часть узла или некоторые сборки веб-пакетов.
3. Браузер, тег сценария.

Структура каталогов проекта

---

sr c

- Dog. js

index. js

package. json

---

Project Files

Dog. 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

Я думаю, это работает с минимальной конфигурацией веб-пакета. Папка dist и ее содержимое создаются веб-пакетом.

Структура каталогов проекта

---

sr c

- Dog. js

dist

- 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];

пакет. json (соответствующие части)

• main сообщает бэкэнду и устаревшим проектам webpack использовать общий формат js.
• модуль предназначен для формата es6
• unpkg для браузера
• файлы сообщают npm какие файлы загружать

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

Answer 2

Просто используйте разные конфигурации веб-пакетов для разных сред и целей. Это общий подход.