使用 Webpack 从子文件夹构建和引用 TypeScript 模块
Build and reference a TypeScript module from a subfolder using Webpack
这道题"module"这个词大概有3种不同的意思,不明白的地方还请大家指正。
我有一个严重依赖 node_module 的 TypeScript 项目,我现在想对其进行更改。我已将此依赖项的源代码克隆到 Git 子模块中。此依赖项也是使用 TypeScript 构建的。
我的目录结构如下:
root/
- source/
- app.tsx (my entrypoint)
- ...
- vendor/
- dependency/ (git submodule)
- node_modules/
- (dependency's dependencies)
- source/
- index.ts
- ...
- package.json
- tsconfig.json
- webpack.config.js
- tsconfig.json
- package.json
文件 root/source/vendor/dependency/source/index.ts
包含依赖项的导出。
我想配置我的项目,以便
- 我可以在我的 .ts 文件中引用我的依赖项,就好像它仍然是 node_module 依赖项一样(即
import { class1, class2 } from "dependency"
.
- 让 webpack 将我的依赖构建到与我的项目相同的包中
我在第 1 点遇到了很大的困难。我不知道如何让 tsc 理解模块名称 "dependency"。
我怀疑问题是我的 tsconfig.json 中缺少配置设置 - 但我无法弄清楚。我已经尝试将 baseUrl
和 paths
设置为我认为应该工作的值,但编译器仍然抱怨找不到模块。
我现在的tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"isolatedModules": false,
"jsx": "react",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"declaration": false,
"noImplicitAny": false,
"sourceMap": true,
"removeComments": true,
"noLib": false,
"preserveConstEnums": false,
"suppressImplicitAnyIndexErrors": true,
"outDir": "./lib",
"types": [
"es6-promise",
"google.analytics"
],
"baseUrl": ".",
"paths": {
"dependency": "vendor/dependency/source/index.ts"
}
},
"exclude": [
"**/node_modules",
"vendor/dependency/node_modules/"
]
}
我现在的webpack.config.js
var path = require("path");
var tsConfigPath = path.resolve("tsconfig.json");
module.exports = {
devtool: "source-map",
entry: {
web: path.resolve(path.join("source", "app.tsx"))
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".scss"],
modules: [
"node_modules",
"vendor"
]
},
output: {
path: path.resolve(path.join("proxy", "static")),
filename: "[name]/[name].js",
publicPath: "/"
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader"
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
},
{ // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
}
]
},
plugins: [
require("webpack-fail-plugin")
],
externals: {
"react": "React",
"react-dom": "ReactDOM"
}
};
如果我做错了,请告诉我...我想做的就是在本地修改我的依赖项,而不必将其发布到 npm。
这有点棘手,但您可以在项目根目录中创建 node_modules
文件夹(如果该文件夹尚不存在)。在其中创建一个文件 dependency.ts
,您可以在其中执行以下操作:
export * from './../vendor/dependency/source/index.ts'
在那之后当你写 import { class1, class2 } from 'dependency'
从您应用程序的任何位置,它会查找 root/node_modules/dependency.ts
.
阅读官方 TypeScrypt 文档中的 article 了解详细信息。
这道题"module"这个词大概有3种不同的意思,不明白的地方还请大家指正。
我有一个严重依赖 node_module 的 TypeScript 项目,我现在想对其进行更改。我已将此依赖项的源代码克隆到 Git 子模块中。此依赖项也是使用 TypeScript 构建的。
我的目录结构如下:
root/
- source/
- app.tsx (my entrypoint)
- ...
- vendor/
- dependency/ (git submodule)
- node_modules/
- (dependency's dependencies)
- source/
- index.ts
- ...
- package.json
- tsconfig.json
- webpack.config.js
- tsconfig.json
- package.json
文件 root/source/vendor/dependency/source/index.ts
包含依赖项的导出。
我想配置我的项目,以便
- 我可以在我的 .ts 文件中引用我的依赖项,就好像它仍然是 node_module 依赖项一样(即
import { class1, class2 } from "dependency"
. - 让 webpack 将我的依赖构建到与我的项目相同的包中
我在第 1 点遇到了很大的困难。我不知道如何让 tsc 理解模块名称 "dependency"。
我怀疑问题是我的 tsconfig.json 中缺少配置设置 - 但我无法弄清楚。我已经尝试将 baseUrl
和 paths
设置为我认为应该工作的值,但编译器仍然抱怨找不到模块。
我现在的tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"isolatedModules": false,
"jsx": "react",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"declaration": false,
"noImplicitAny": false,
"sourceMap": true,
"removeComments": true,
"noLib": false,
"preserveConstEnums": false,
"suppressImplicitAnyIndexErrors": true,
"outDir": "./lib",
"types": [
"es6-promise",
"google.analytics"
],
"baseUrl": ".",
"paths": {
"dependency": "vendor/dependency/source/index.ts"
}
},
"exclude": [
"**/node_modules",
"vendor/dependency/node_modules/"
]
}
我现在的webpack.config.js
var path = require("path");
var tsConfigPath = path.resolve("tsconfig.json");
module.exports = {
devtool: "source-map",
entry: {
web: path.resolve(path.join("source", "app.tsx"))
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".scss"],
modules: [
"node_modules",
"vendor"
]
},
output: {
path: path.resolve(path.join("proxy", "static")),
filename: "[name]/[name].js",
publicPath: "/"
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader"
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
},
{ // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
}
]
},
plugins: [
require("webpack-fail-plugin")
],
externals: {
"react": "React",
"react-dom": "ReactDOM"
}
};
如果我做错了,请告诉我...我想做的就是在本地修改我的依赖项,而不必将其发布到 npm。
这有点棘手,但您可以在项目根目录中创建 node_modules
文件夹(如果该文件夹尚不存在)。在其中创建一个文件 dependency.ts
,您可以在其中执行以下操作:
export * from './../vendor/dependency/source/index.ts'
在那之后当你写 import { class1, class2 } from 'dependency'
从您应用程序的任何位置,它会查找 root/node_modules/dependency.ts
.
阅读官方 TypeScrypt 文档中的 article 了解详细信息。