Hello I would like to configure Typescript with composite config and webpack (the code was working well when using a single tsconfig.json ). I precise that I am TypeScript newbie and rusted in javascript. I have difficulties to obtain my outputs json files.
EDIT : I added a bit more configuration and changed the directory structure for something better I believe
My project structure:
tsconfig.base.json
tsconfig.json
tsconfig.base.json
webpack.config.json
|--model
|--tsconfig.json
|--src
|--foo
|--x.ts
|--...
|--bar
|--y.ts
|--...
|--...
|--control
|--tsconfig.json
|--src
|--eventHandlerA.ts
|--eventHandlerB.ts
|--...
|--app1
|--tsconfig.json
|--src
|--app1.ts
|--app1
|--tsconfig.json
|--src
|--app2.ts
My desired output are 2 files "app1.js" and "app2.js". Both of them rely on a "controller" package which relies on a "model" package. I would like to run at least the following commands:
Content of ./tsconfig.js :
{
"references": [
{
"path": "app1"
},
{
"path": "app2"
}
],
"include": []
}
Content of ./tsconfig.base.js :
{
"compileOnSave": true,
"compilerOptions": {
"composite": true
"declaration": true,
"moduleResolution": "node",
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es6",
"jsx": "react",
}
}
Content of /tsconfig.js :
{
"files": [],
"include": [],
"references": [
{
"path": "app1"
},
{
"path": "app2"
}
]
}
Content of ./webpack.conf.js
module.exports = {
mode: "production",
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx"],
},
module: {
rules: [
{
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: [
{
loader: "ts-loader"
}
]
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
}
]
},
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
"react": "React",
"react-dom": "ReactDOM"
}
};
content of package.json
{
"name": "abc",
"version": "1.0.0-SNAPSHOT"
"scripts": {
"test": "npm run build && jest",
"build": "tsc -b",
"clean": "tsc -b --clean",
"rebuild": "npm run clean && npm run build"
},
"keywords": [],
"author": "toto",
"license": "ISC",
"devDependencies": {
...
},
"dependencies": {
...
}
}
If I run npm run build, I have import failures. To analyze it I ran / tsc -b control /:
error TS2307: Cannot find module 'x' or its corresponding type declarations.
4 import * as x from 'x'
I tried to modify my import in several ways but I always have a failure on the import. How to import a class (which is exported) from a composite "project" to another using absolute path?
Thank you for helping
To use absolute paths try to configure your tsconfig.json
file with baseUrl
and paths
:
{
"compileOnSave": true,
"compilerOptions": {
"declaration": true,
"moduleResolution": "node",
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es6",
"jsx": "react",
"baseUrl": "../../", /// <--- baseUrl gives a path from the tsconfig to the root
"paths": {
"src/*": [ "../../src/*" ] /// <--- paths specify src/* is inside the src folder, which is ../../ relative to the tsconfig
}
},
"include": [
"./**/*.ts",
"./**/*.tsx"
]
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.