Я создаю специальный пакет TypeScript, который позволяет пользователям автоматически использовать REST API и преобразовывать полученные JSON-данные в настоящие TypeScript-объекты.Пакет будет использоваться в другом TypeScript-проекте в сочетании с Vue.js.
Я пробовал несколько разных способов скомпилировать и упаковать пакет с помощью Webpack и распространить его через npm.Я могу скомпилировать пакет в JavaScript и сгенерировать index.d.ts, которые все правильно настроены в package.json.Я также могу включить пакет в мой другой проект.При попытке скомпилировать мой проект TypeScript / Vue я всегда получаю ошибку This dependency was not found
в результирующих компонентах.
Полное сообщение об ошибке:
This dependency was not found:
* typescript-rest-mapper in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/ts-loader??ref--12-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/sample/SampleDetailsComponent.vue?vue&type=script&lang=ts&, ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_module
s/ts-loader??ref--12-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/sample/SampleOverviewComponent.vue?vue&type=script&lang=ts& and 7 others
Это package.jsonи webpack.config.js пакета:
Package.json:
{
"name": "typescript-rest-mapper",
"version": "1.0.6",
"description": "Package that allows you to automagically build services that consume REST API's. Received/send data is automatically converted between real TypeScript-objects and JSON-objects.",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
"scripts": {
"build": "webpack && dts-bundle --configJson dts-bundle.config.json",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/AbyxBelgium/TypeScriptRestMapper.git"
},
"keywords": [
"service",
"rest-api",
"typescript",
"rest",
"mapper"
],
"author": "Pieter Verschaffelt",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/AbyxBelgium/TypeScriptRestMapper/issues"
},
"homepage": "https://github.com/AbyxBelgium/TypeScriptRestMapper#readme",
"devDependencies": {
"@babel/core": "^7.4.0",
"@babel/preset-env": "^7.4.2",
"babel-loader": "^8.0.5",
"dts-bundle": "^0.7.3",
"ts-loader": "^5.3.3",
"typescript": "^3.3.4000",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0"
},
"dependencies": {
"reflect-metadata": "^0.1.13",
"axios": "^0.18.0",
"pluralize": "^7.0.0"
}
}
webpack.config.js:
const path = require('path');
module.exports = {
entry: path.join(__dirname, '/src/index.ts'),
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: [
'ts-loader'
],
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
library: 'TypeScriptRestMapper',
libraryTarget: 'umd'
},
mode: 'development'
};
В моем другом проекте явключайте файлы, используя, например, import {Service} from "typescript-rest-mapper";
.Обратите внимание, что Service
определен в src/service/Service.ts
в моем пакете.Чтобы экспортировать все различные классы из моего пакета, я создал файл index.ts, в котором указано:
export {Entity} from "./entity/Entity";
export {Service} from "./service/Service";
export {Status} from "./service/Status";
export {Read} from "./decorators/read";
export {ReadArray} from "./decorators/readArray";
export {Store} from "./decorators/store";
export {StoreArray} from "./decorators/storeArray";
export {Update} from "./decorators/update";
export {UpdateArray} from "./decorators/updateArray";
Я попытался изменить экспорт на export * from "./entity/Entity
и т. Д. Что можетчто-то пошло не так?
Примечание. Мой пакет с открытым исходным кодом, его можно найти на GitHub: https://github.com/AbyxBelgium/TypeScriptRestMapper