← Cloudflare Workers / workers / wrangler / migration / v1-to-v2

1. Перенос проектов webpack

В этом руководстве описаны шаги миграции проекта на webpack с Wrangler v1 на Wrangler v2. После выполнения этого руководства обновите версию Wrangler.

Предыдущие версии Wrangler предлагали базовую поддержку webpack ↗ на type и webpack_config ключи в конфигурационный файл Wrangler. Начиная с Wrangler v2 Wrangler больше не поддерживает type и webpack_config ключи, но вы всё ещё можете использовать webpack с вашими Workers.

Если вы используете webpack с Workers, вы можете относиться к одной из четырёх категорий:

1. Я использую [build] чтобы запускать webpack (или другой сборщик) отдельно от wrangler..

2. Я использую type = webpack, но не предоставлять собственную конфигурацию и позволить Wrangler взять это на себя..

3. Я использую type = webpack и webpack_config = <path/to/webpack.config.js> для обработки файлов JSX, TypeScript, WebAssembly, HTML и других нестандартных типов файлов..

4. Я использую type = webpack и webpack_config = <path/to/webpack.config.js> для выполнения преобразований кода и/или другой функциональности, изменяющей код..

Если вы не нашли себя в списке, создать issue ↗ и мы сможем помочь именно в вашей ситуации и улучшить это руководство для будущих читателей.

Wrangler v2 поддерживает [build] ключ, поэтому сборка ваших Workers продолжит использовать вашу собственную настройку.

Wrangler продолжит делать это автоматически. Удалите type = webpack из файла Wrangler.

Начиная с Wrangler v2, в Wrangler есть встроенная поддержка этого сценария использования. См. Bundling для дополнительных сведений.

Среда выполнения Workers обрабатывает JSX и TypeScript. Вы можете import любые нужные вам модули в свой код, и Workers runtime автоматически включает их в собранный Worker.

Удалите type и webpack_config ключи из файла Wrangler.

Wrangler v2 больше не поддерживает типы проектов, в том числе type = webpack и конфигурацию через webpack_config ключ. Если ваша конфигурация webpack выполняет операции, выходящие за рамки добавления загрузчиков (например, для TypeScript), вам придётся поддерживать собственную конфигурацию webpack самостоятельно. В долгосрочной перспективе вам следует переход на внешний [build] процесс. Пока что шаги сборки Wrangler v1 можно воспроизвести и в новых версиях Wrangler, следуя инструкциям ниже.

1. Добавить wranglerjs-compat-webpack-plugin ↗ как devDependency.

wrangler-js ↗, поставляемый как отдельная библиотека от Wrangler v1 ↗, это скрипт Node, который настраивает и запускает webpack 4 ↗ за вас. Когда вы задаёте type = webpack, Wrangler v1 выполнял этот скрипт за вас. Мы перенесли эту функциональность в новый пакет, wranglerjs-compat-webpack-plugin ↗, который можно использовать как плагин webpack ↗.

Для этого вам потребуется добавить его как зависимость:

npm i -D webpack@^4.46.0 webpack-cli wranglerjs-compat-webpack-plugin

Это должно отобразиться в package.json файле:

{
	"name": "my-worker",
	"version": "x.y.z",
	// ...
	"devDependencies": {
		// ...
		"wranglerjs-compat-webpack-plugin": "^x.y.z",
		"webpack": "^4.46.0",
		"webpack-cli": "^x.y.z"
	}
}

2. Добавить wranglerjs-compat-webpack-plugin к webpack.config.js.

Измените ваш webpack.config.js файл, чтобы включить только что установленный плагин.

const {
	WranglerJsCompatWebpackPlugin,
} = require("wranglerjs-compat-webpack-plugin");

module.exports = {
	// ...
	plugins: [new WranglerJsCompatWebpackPlugin()],
};

3. Добавьте скрипт сборки, который использует ваш package.json.

{
	"name": "my-worker",
	"version": "2.0.0",
	// ...
	"scripts": {
		"build": "webpack" // <-- Add this line!
		// ...
	}
}

4. Удалите неподдерживаемые записи из конфигурационный файл Wrangler.

Удалите type и webpack_config ключи из файла Wrangler, так как они больше не поддерживаются.

{
	// Remove these!
	"type": "webpack",
	"webpack_config": "webpack.config.js"
}

type = "webpack"
webpack_config = "webpack.config.js"

5. Укажите Wrangler, как собирать ваш Worker.

Wrangler больше не знает, как собирать ваш Worker. Вам нужно самостоятельно указать, как вызывать webpack и где искать результат его работы. Это отражается в двух полях:

{
	"main": "./worker/script.js", // by default, or whatever file webpack outputs
	"build": {
		"command": "npm run build" // or "yarn build"
	}
}

main = "./worker/script.js"

[build]
command = "npm run build"

6. Протестируйте свой проект.

Попробуйте выполнить npx wrangler deploy чтобы убедиться, что конфигурация работает как ожидается.