javascript - 未找到模块:错误:无法解析“./templates”
问题描述
我有这个 javascript (TypeScript) 文件
索引.ts
import
'../node_modules/bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
import * as templates from './templates';
document.body.innerHTML = templates.main;
const mainElement =
document.body.querySelector('.b4.main');
const alertsElement =
document.body.querySelector('.b4-alerts');
mainElement.innerHTML = templates.welcome;
alertsElement.innerHTML = templates.alert;
当我运行我的项目(使用 webpack 开发服务器)时,我收到以下错误:
Module not found: Error: Can't resolve './templates' in '/Users/BorisGrunwald/Desktop/Node/b4-app/app'
我不明白为什么它似乎找不到“templates.ts”,因为这两个文件都在同一个文件夹中。
这是我的项目结构的图片:
我的 webpack 配置:
'use strict';
const path = require('path');
const distDir = path.resolve(__dirname,'dist');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: './app/index.ts',
output: {
filename: 'bundle.js',
path: distDir
},
devServer: {
contentBase:distDir,
port:60800
},
plugins: [
new HtmlWebpackPlugin({
title: 'Better Book Bundle Builder'
}),
new webpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery'
})
],
module: {
rules: [{
test:/\.ts$/,
loader:'ts-loader'
},{
test: /\.css$/,
use:['style-loader','css-loader']
},{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader:'url-loader?limit=100000'
}]
}
};
模板.ts
export const main = `
<div class="container">
<h1>B4 - Book Bundler</h1>
<div class="b4-alerts"></div>
<div class="b4-main"></div>
</div>
`;
export const welcome = `
<div class="jumbotron">
<h1>Welcome!</h1>
<p>B4 is an application for creating book bndles</p>
</div>
`;
export const alert = `
<div class="alert alert-success alert-dismissible fade in"
role="alert">
<button class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Success!</strong> Bootstrap is working
</div>
`;
任何人都可以看到有什么问题吗?
解决方案
试试这是否有效。这将允许从没有点的文件夹中导入。
import {main, welcome, alert} from './templates';
Webpack 默认不查找.ts
文件。您可以配置 resolve.extensions 来查找.ts
. 不要忘记添加默认值,否则大多数模块会中断,因为它们依赖于.js
自动使用扩展的事实。
resolve: {
extensions: ['.ts', '.js', '.json']
}
这也适用于所有其他文件,例如.scss
文件等。错误将是SassError: Can't find stylesheet to import.
推荐阅读
- javascript - 如何从数组中删除对象
- javascript - Javascript 从字符串或链接中删除减少或修剪字符串
- android - 视图分页器内的片段中的 Recyclerview,不滚动
- windows - 是否可以在 cmd 提示符下退出仅 1 个循环交互?
- python - 更正参数以创建 DiagnosticSettingsOperations 对象
- c++ - 如何在队列中进行搜索?
- laravel - 是否可以使用 Laravel 生成的 QR 码适合 word 文件?
- selenium - Python Selenium 单击元素不起作用 - 无法获取文件
- javascript - 复选框验证的Javascript?
- javascript - 如何在反应中控制多个输入的状态