У меня есть этот файл javascript (TypeScript)

Index.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 dev), я получаю следующую ошибку:

Module not found: Error: Can't resolve './templates' in '/Users/BorisGrunwald/Desktop/Node/b4-app/app'

Я не понимаю, почему он не может найти "templates.ts", поскольку оба файла находятся в одной папке.

Вот изображение структуры моего проекта:

enter image description here

Конфигурация моего веб-пакета:

'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'
        }]
    }
};

Templates.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">&times;</span>
        </button>
        <strong>Success!</strong> Bootstrap is working
    </div>
`; 

Кто-нибудь может увидеть, что не так?

8
Boris Grunwald 15 Ноя 2018 в 22:38

1 ответ

Лучший ответ

Попробуйте, если это сработает. Это позволит импортировать из папки без точек.

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.

21
gatsbyz 5 Апр 2021 в 07:12