[英]Creating a typescript library for generic functionality in several projects
我想導出幾個類,有些是獨立的,有些是相互依賴的,由一個命名空間包裝,作為其他項目使用的模塊。
所以我設置了一個 webpack 構建來將它們編譯成一個 minified.js 文件和一個.d.ts 文件,它們都被命名空間“Platform”包裹。
這是我用於自定義事件的示例 class:
namespace Platform {
export class GameEvent {
****code****
}
}
問題是,一旦我將它們包裝在這個命名空間中,構建就會失敗並出現以下錯誤:
./Utilities/GameEvent.ts 中的錯誤模塊構建失敗(來自../node_modules/ts-loader/index.js):錯誤:TypeScript 沒有發出 output for \Platform\src\Utilities\GameEvent.ts。 在 makeSourceMapAndFinish (\Platform\node_modules\ts-loader\dist\index.js:53:18) 在 successLoader (\Platform\node_modules\ts-loader\dist\index.js:40:5) 在 Object.loader (\平台\node_modules\ts-loader\dist\index.js:23:5)
這是我的 tsconfig:
{
"compilerOptions": {
"target": "es6",
"module": "esnext",
"strict": true,
"noEmit": false,
"importHelpers": true,
"moduleResolution": "node",
"esModuleInterop": true,
"sourceMap": true,
"baseUrl": "./src",
"rootDir": "./src",
"outDir": "./types",
"emitDeclarationOnly": true,
"declaration": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"lib": [
"es6",
"dom"
],
"removeComments": true,
"typeRoots": [
"node_modules/@types",
"node_module/phaser/types"
],
"types": [
"phaser",
"jest"
]
},
"include": [
"src/**/*",
]
}
這是我的 webpack.config.js:
const path = require("path");
const webpack = require('webpack');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const DeclarationBundlerPlugin = require('declaration-bundler');
const fs = require('fs');
const srcDir = path.resolve(__dirname, 'src');
const typesDir = path.resolve(__dirname, 'types');
function scanDirectory(dir) {
const fileArr = [];
fs.readdirSync(dir).forEach((file) => {
const filepath = path.join(dir, file);
if (fs.lstatSync(filepath).isDirectory()) {
fileArr.push(...scanDirectory(filepath));
} else if (/\.tsx?$/.test(file)) {
fileArr.push(path.resolve(filepath));
}
});
return fileArr;
}
const entryPoints = scanDirectory(srcDir);
const typeEntryPoints = scanDirectory(typesDir);
module.exports = {
mode: "production",
context: path.resolve(__dirname, 'src'),
entry: {
'platform': entryPoints
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: "[name].min.js",
},
externals: {
phaser: 'phaser',
},
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: 'ts-loader',
},
],
include: [path.resolve(__dirname, 'src')],
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
plugins: [
new CleanWebpackPlugin(),
new webpack.DefinePlugin({
'typeof SHADER_REQUIRE': JSON.stringify(false),
'typeof CANVAS_RENDERER': JSON.stringify(true),
'typeof WEBGL_RENDERER': JSON.stringify(true)
}),
new DeclarationBundlerPlugin({
entry: typeEntryPoints,
moduleName: 'Platform',
out: './platform.d.ts',
}),
],
performance: { hints: false },
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: true,
safari10: true,
mangle: true,
output: {
comments: false
}
}
})
]
}
};
這些是我的 devDependencies:
"@jest/globals": "^29.3.1",
"@declaration-bundler": "^1.0.1",
"@types/jest": "^29.2.5",
"before-build-webpack": "^0.2.13",
"clean-webpack-plugin": "^3.0.0",
"glob": "^8.0.3",
"html-webpack-plugin": "^5.3.1",
"jest": "^29.3.1",
"jest-canvas-mock": "^2.4.0",
"jest-environment-jsdom": "^29.3.1",
"terser-webpack-plugin": "^5.3.6",
"ts-jest": "^29.0.3",
"ts-loader": "^8.0.18",
"ts-node": "^10.9.1",
"typescript": "^4.9.4",
"webpack": "^5.28.0",
"webpack-cli": "^4.9.1"
我嘗試只對每個沒有命名空間的文件使用“導出默認類”,但是當我發布 package 並在另一個項目中使用它時,它無法將其識別為模塊並且無法構建/測試。
我應該怎么go一下這個?
好吧,我想通了,不完全是我想要的,但它運作良好。
這是我的 webpack.config.js:
const path = require("path"); const webpack = require('webpack'); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const TerserPlugin = require("terser-webpack-plugin"); const DtsBundleWebpack = require("dts-bundle-webpack"); const removeEmptyDirectories = require('remove-empty-directories'); const libPath = path.resolve(__dirname, 'lib'); module.exports = { mode: "production", context: path.resolve(__dirname, 'src'), entry: { 'platform': "./platform.ts" }, output: { path: libPath, filename: "[name].min.js", libraryTarget: 'commonjs2' }, module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', }, ], }, resolve: { extensions: ['.tsx', '.ts', '.js'], }, plugins: [ new CleanWebpackPlugin(), new webpack.DefinePlugin({ 'typeof SHADER_REQUIRE': JSON.stringify(false), 'typeof CANVAS_RENDERER': JSON.stringify(true), 'typeof WEBGL_RENDERER': JSON.stringify(true) }), new DtsBundleWebpack({ name: "<lib name>", main: "lib/platform.d.ts", out: "platform.d.ts", removeSource: true, outputAsModuleFolder: true }), function () { this.hooks.done.tap("Done", (stats) => { removeEmptyDirectories(libPath); }); } ], performance: { hints: false }, optimization: { minimize: true, minimizer: [ new TerserPlugin({ terserOptions: { compress: true, safari10: true, mangle: true, output: { comments: false } } }) ] } };
我的文件結構是這樣的:
對於 class 個文件,每個 index.ts 文件都有一個“export * from 'filename'”。
platform.ts 文件導出所有模塊
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.