- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个使用 TypeScript 和 Webpack 的项目。我想导入不带扩展名的文件。
这是我的树:
.
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── config.test.json
├── dist
│ └── api.js
├── package.json
├── src
│ └── api
│ ├── App.ts
│ └── routes
│ └── user.ts
├── tsconfig.json
└── webpack.common.js
当在 App.ts
中时,我这样做:
import usersRouter from './routes/user';
而不是
import usersRouter from './routes/user.ts';
我得到:
[1] /Users/me/projects/project/dist/api.js:100
[1] __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module './routes/user'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()));
[1] ^
[1]
[1] Error: Cannot find module './routes/user'
[1] at webpackMissingModule (/Users/me/projects/project/dist/api.js:100:65)
[1] at Object../src/api/App.ts (/Users/me/projects/project/dist/api.js:100:156)
[1] at __webpack_require__ (/Users/me/projects/project/dist/api.js:21:30)
[1] at Object.0 (/Users/me/projects/project/dist/api.js:176:18)
[1] at __webpack_require__ (/Users/me/projects/project/dist/api.js:21:30)
[1] at /Users/me/projects/project/dist/api.js:85:18
[1] at Object.<anonymous> (/Users/me/projects/project/dist/api.js:88:10)
[1] at Module._compile (internal/modules/cjs/loader.js:721:30)
[1] at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
[1] at Module.load (internal/modules/cjs/loader.js:620:32)
[1] [nodemon] app crashed - waiting for file changes before starting...
这是我的webpack.common.js
:
const nodeExternals = require('webpack-node-externals'); // Remove node_modules when creating the bundle
module.exports = {
entry: ['@babel/polyfill', './src/api/App.ts'],
output: {
filename: 'api.js',
path: __dirname + '/dist',
libraryTarget: 'commonjs2'
},
target: 'node',
node: {
console: false,
global: false,
process: false,
Buffer: false,
__filename: false,
__dirname: false
},
externals: [nodeExternals()],
module: {
rules: [
{
test: /\.(ts|tsx)$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
}
};
这是我的tsconfig.js
:
{
"compilerOptions": {
"outDir": "./dist/",
"target": "es5",
"allowJs": true,
"sourceMap": true,
"allowSyntheticDefaultImports": true
},
"include": ["src"],
"exclude": ["node_modules"]
}
这里babel.config.js
:
module.exports = function(api) {
api.cache(true);
const presets = ['@babel/preset-env'];
const plugins = [
'@babel/plugin-transform-arrow-functions',
'@babel/plugin-proposal-class-properties',
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-proposal-object-rest-spread',
];
return {
presets,
plugins,
};
};
这是我的Package.json
:
{
"name": "@me/project",
"version": "0.0.1",
"description": "An API",
"main": "dist/api.js",
"scripts": {
"start": "concurrently \"npm run buildDev\" \"npm run startDev\"",
"buildDev": "webpack --watch --config webpack.dev.js",
"startDev": "nodemon --inspect ./dist/api.js"
},
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.3.0",
"@babel/plugin-proposal-object-rest-spread": "^7.3.2",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-arrow-functions": "^7.2.0",
"@babel/plugin-transform-strict-mode": "^7.2.0",
"@babel/preset-env": "^7.3.1",
"autoprefixer": "^8.4.1",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.1.0",
"babel-loader": "^8.0.5",
"babel-minify-webpack-plugin": "^0.3.1",
"eslint": "^4.19.1",
"eslint-formatter-pretty": "^1.3.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-import": "^2.16.0",
"file-loader": "^1.1.11",
"lint-staged": ">=8",
"ts-loader": "^5.3.3",
"typescript": "^3.6.3",
"webpack": "^4.40.1",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14",
"webpack-node-externals": "^1.7.2"
},
"dependencies": {
"@babel/polyfill": "^7.2.5",
"@types/body-parser": "^1.17.0",
"@types/cookie-parser": "^1.4.2",
"@types/cors": "^2.8.6",
"@types/express": "^4.17.1",
"@types/morgan": "^1.7.37",
"@types/node": "^12.7.5",
"babel-polyfill": "^6.26.0",
"concurrently": "^3.6.1",
"cookie-parser": "~1.4.3",
"cors": "^2.8.5",
"express": "^4.16.3",
"express-useragent": "^1.0.12",
"nodemon": "^1.18.9",
"npm": "^6.7.0",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"passport-local": "^1.0.0",
"prettier-eslint": "^8.8.1",
"ts-node": "^8.0.2",
"webpack-merge": "^4.2.1"
}
}
我知道这是一个常见错误,但我不确定如何修复它。
欢迎任何想法!
最佳答案
你必须告诉 webpack 解析 .ts
扩展名。例如添加:
resolve: {
// Add .ts and .tsx as a resolvable extension.
extensions: [".ts", ".tsx", ".js"]
}
到您的webpack.config.js
文件。
有关更多信息,请参阅 webpack resolve documentation 。特别是resolve extensions章。
关于javascript - Webpack 和 TypeScript : module resolution error,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57923201/
reqwest v0.9 将 serde v1.0 作为依赖项,因此实现 converting serde_json errors into reqwest error . 在我的代码中,我使用 se
我有这个代码: let file = FileStorage { // ... }; file.write("Test", bytes.as_ref()) .map_err(|e| Mu
我只是尝试用angular-cli创建一个新项目,然后运行服务器,但是它停止并显示一条有趣的消息:Error: No errors。 我以这种方式更新了(希望有帮助):npm uninstall -g
我从我的 javascript 发送交易 Metamask 打开传输对话框 我确定 i get an error message in metamask (inpage.js:1 MetaMask -
这个问题在这里已经有了答案: How do you define custom `Error` types in Rust? (3 个答案) How to get a reference to a
我想知道两者之间有什么大的区别 if let error = error{} vs if error != nil?或者只是人们的不同之处,比如他们如何用代码表达自己? 例如,如果我使用这段代码: u
当我尝试发送超过 50KB 的图像时,我在 Blazor 服务器应用程序上收到以下错误消息 Error: Connection disconnected with error 'Error: Serv
我有一个error-page指令,它将所有异常重定向到错误显示页面 我的web.xml: [...] java.lang.Exception /vi
我有这样的对象: address: { "phone" : 888, "value" : 12 } 在 WHERE 中我需要通过 address.value 查找对象,但是在 SQL 中有函数
每次我尝试编译我的代码时,我都会遇到大量错误。这不是我的代码的问题,因为它在另一台计算机上工作得很好。我尝试重新安装和修复,但这没有帮助。这是整个错误消息: 1>------ Build starte
在我的代码的类部分,如果我写一个错误,则在不应该的情况下,将有几行报告为错误。我将'| error'放在可以从错误中恢复的良好/安全位置,但是我认为它没有使用它。也许它试图在某个地方恢复中间表情? 有
我遇到了 csv 输入文件整体读取故障的问题,我可以通过在 read_csv 函数中添加 "error_bad_lines=False" 来删除这些问题来解决这个问题。 但是我需要报告这些造成问题的文
在 Spring 中,验证后我们在 controller 中得到一个 BindingResult 对象。 很简单,如果我收到验证错误,我想重新显示我的表单,并在每个受影响的字段上方显示错误消息。 因此
我不知道出了什么问题,因为我用 Java 编程了大约一年,从来没有遇到过这个错误。在一分钟前在 Eclipse 中编译和运行工作,现在我得到这个错误: #A fatal error has been
SELECT to_char(messages. TIME, 'YYYY/MM/DD') AS FullDate, to_char(messages. TIME, 'MM/DD
我收到这些错误: AnonymousPath\Anonymized.vb : error BC30037: Character is not valid. AnonymousPath\Anonymiz
我刚刚安装了 gridengine 并在执行 qstat 时出现错误: error: commlib error: got select error (Connection refused) erro
嗨,我正在学习 PHP,我从 CRUD 系统开始,我在 Windows 上安装了 WAMP 服务器,当我运行它时,我收到以下错误消息。 SCREAM: Error suppression ignore
我刚刚开始一个新项目,我正在学习核心数据教程,可以找到:https://www.youtube.com/watch?v=zZJpsszfTHM 我似乎无法弄清楚为什么会抛出此错误。我有一个名为“Exp
当我使用 Jenkins 运行新构建时,出现以下错误: "FilePathY\XXX.cpp : fatal error C1853: 'FilePathZ\XXX.pch' precompiled
我是一名优秀的程序员,十分优秀!