gpt4 book ai didi

typescript - 别名与 Webpack 4 和 awesome-typescript 加载器不工作

转载 作者:搜寻专家 更新时间:2023-10-30 20:32:29 25 4
gpt4 key购买 nike

我目前无法正常使用别名。据我了解,要使别名与 webpack 一起正常工作,您必须:

版本

  "typescript": "2.8.3",
"webpack": "4.16.2",
"webpack-cli": "3.1.0",
"awesome-typescript-loader": "5.2.0",
"html-webpack-plugin": "3.2.0",
"source-map-loader": "^0.2.3",
  1. 在 tsconfig 中将别名定义为路径。我通过构建它验证了我的 tsconfig 和路径/别名是正确的。如果配置不正确,构建将失败。

tsconfig.json

这是示例文件

示例.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Footer from '@common/Footer';

export default class Sample{

public static page(): void {
ReactDOM.render(<Footer/>,
document.getElementById('footer')
);
}
}

对于 webpack,它被配置为使用 awesome-typescript-loader。据我了解,它利用 TsConfigPathsPlugin 检查所有别名的 tsconfig,然后解析它。所以当它到达 webpack 时,别名已经解析。然而,事实并非如此。在 bundle.js 中,我希望看不到任何 @common 或任何别名,并且它会被转换。

我还添加了尝试直接在 webpack 中解析别名以及解析中的别名/aliasFields。但仍然没有运气。

webpack.js

 const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const fs = require('fs');
const TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPlugin;
const ROOT_DIR = path.resolve(__dirname, ".","..");

const config = {
context: path.resolve(__dirname, '.',".."),
mode: "development",
resolve: {
modules: [

],
extensions: ['.ts', '.tsx', '.js', '.jsx'],
plugins: [
new TsConfigPathsPlugin({
configFileName: path.resolve(ROOT_DIR,'tsconfig.json')
})
],
aliasFields: ["@entry", "@common"],
alias: {
"@entry": "entry/",
"@common": "common/"
}
},
entry: {
entryPoint: path.resolve(ROOT_DIR,'entry, 'index.tsx')
},
optimization: {
minimize: false, // debugging purpose
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
},
output: {
filename: "[name]_bundle.js",
path: path.join(ROOT_DIR, 'dist_w'),
},

// Enable sourcemaps for debugging webpack's output.
devtool: "eval-source-map",

resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]
},

module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.(ts|tsx)$/, loader: "awesome-typescript-loader" },

// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
plugins: [
//Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html', //Name of file in ./dist/
template: path.resolve(ROOT_DIR,'entry-point', 'index.html'),
hash: true,
})
],
stats: { //object
assets: true,
colors: true,
errors: true,
errorDetails: true,
hash: true
// ...
}
};

module.exports = config;

我从 web pack 得到的错误信息是:

Module not found: Error: Can't resolve '@common\Footer' in 'entry\src'
resolve '@common\Footer' in 'entry\src'
Parsed request is a module
using description file: <root>\package.json (relative path: ./entry/)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
entry\node_modules doesn't exist or is not a directory
<root>\..\..\node_modules doesn't exist or is not a directory
<root>\..\node_modules doesn't exist or is not a directory
<root>\node_modules doesn't exist or is not a directory
looking for modules in <root>\node_modules
using description file: <root>\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
looking for modules in entry\node_modules
using description file: <root>\package.json (relative path: ./entry-point/node_modules)
Field 'browser' doesn't contain a valid alias configuration
using description file: <root>\package.json (relative path: ./node_modules/@common//Footer)
no extension
Field 'browser' doesn't contain a valid alias configuration
using description file: <root>\package.json (relative path: ./entry-point/node_modules/@common/Footer)
no extension
Field 'browser' doesn't contain a valid alias configuration
<root>\node_modules\@common\Footer doesn't exist
.ts

任何建议表示赞赏,谢谢,

最佳答案

这是我在我的一个项目中使用的,你必须在 tsconfig 和 webpack.config 中配置它,但值不同:

  // webpack.config
resolve: {
extensions: [".ts", ".js"],
alias: { "@src": path.resolve(__dirname, "src") },
},

// tsconfig
"paths": {
"@src/*": ["./src/*"]
},

关于typescript - 别名与 Webpack 4 和 awesome-typescript 加载器不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51624134/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com