Как мне заставить этот проект Typescript Webpack компилироваться без ошибок?

Я пытаюсь преобразовать всего два файла .js в файлы .ts в моем рабочем проекте webpack node.js и скомпилировать его (actions.ts и flux.ts). При работе

webpack --progress --colors

Я получаю эту ошибку:

ERROR in ./src/app/tools/flux.ts
(2,11): error TS2304: Cannot find name 'require'.

ERROR in ./src/app/tools/flux.ts
(4,1): error TS2304: Cannot find name 'module'.

ERROR in ./src/app/actions/actions.ts
(2,12): error TS2304: Cannot find name 'require'.

ERROR in ./src/app/actions/actions.ts
(11,1): error TS2304: Cannot find name 'module'.

Как мне это исправить?

Вы можете увидеть мою структуру папок и код, который я пытаюсь скомпилировать справа, на этом снимке экрана:

Структура папок

И вот моя конфигурация веб-пакета, если это поможет:

'use strict';

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
var rootPath = __dirname; //site
var srcPath = path.join(rootPath, 'src'); //site/src

module.exports =
{
    bail: true,
    cache: true,
    context: rootPath,
    debug: true,
    devtool: 'inline-source-map', //'eval-cheap-module-source-map','inline-source-map'
    target: 'web',
    devServer:
    {
        contentBase: './dist',
        historyApiFallback: true
    },
    entry:
    {
        app: path.join(srcPath, 'app/actions/actions.ts'),  //main.jsx
        lib: ['react', 'react-router']
    },
    output:
    {
        path: path.join(rootPath, 'dist'),
        publicPath: '',
        filename: '[name].js',
        library: ['[name]', '[name]'],
        pathInfo: true
    },
    resolve:
    {
        root: srcPath,
        extensions: ['', '.js', '.jsx', '.ts', '.tsx'],
        modulesDirectories: ['node_modules', 'src', 'typings']
    },
    module:
    {
        loaders:
        [
            {test: /\.js?$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
            {test: /\.jsx?$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
            {test: /\.ts?$/, loader: 'ts-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
            {test: /\.tsx?$/, loader: 'ts-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
            {test: /\.scss?$/, loaders: ['style', 'css', 'sass']},
            {test: /\.png?$/, loader: 'file-loader'},
            {test: /\.jpg?$/, loader: 'file-loader'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml'},
            {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
            {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/octet-stream"},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"},
        ]
    },
    plugins:
    [
        new CopyWebpackPlugin
        ([
            { from: 'src/images', to: 'images' }
        ]),
        new webpack.optimize.CommonsChunkPlugin('lib', 'lib.js'),
        new HtmlWebpackPlugin
        ({
            inject: true,
            template: 'src/index.html'
        }),
        new webpack.NoErrorsPlugin()
    ]
};

person Richard    schedule 28.11.2015    source источник
comment
Вы установили модуль alt npm?   -  person    schedule 28.11.2015
comment
Да, все работало до смены двух файлов на .ts. У меня есть все модули npm, и теперь у меня также есть все определения DefinitelyTyped для модулей в папке typings (хотя я не знаю, может ли веб-пакет их видеть)   -  person Richard    schedule 28.11.2015


Ответы (2)


Ошибка в основном заключается в том, что TypeScript жалуется, что получает JavaScript как модуль CommonJS (require, module), но ожидает import и export =. Исходный код на диске правильный, поэтому что-то, похоже, преобразует этот код до того, как он попадет в TypeScript.

Я считаю, что проблема в том, что TypeScript фактически запускается дважды. Если вы посмотрите на свои загрузчики, у вас есть вопросительные знаки (?) в конце каждого регулярного выражения расширения. Это делает последнюю букву каждого расширения необязательной, что неверно. В этом случае расширение .ts будет соответствовать как /\.ts?$/, так и /\.tsx?$/, поэтому webpack дважды выполняет TypeScript для одного и того же файла. Первый проход работает нормально, но второй проход терпит неудачу, потому что он уже был преобразован.

Вы должны удалить вопросительные знаки практически из всех ваших тестов загрузчика. Места, где вопросительный знак является хорошей идеей, - это tsx и jsx. Таким образом, один загрузчик, сконфигурированный для /\.tsx?$/, будет корректно соответствовать как .ts, так и .tsx. То же самое касается jsx.

person James Brantly    schedule 30.11.2015
comment
Большое спасибо! Неделю с этим боролся. Но это еще не совсем правильно - теперь 'require' принимается, но не может найти модуль 'alt'. Как видите, в моей конфигурации resolve.modulesDirectories есть и «node_modules», и «typings». Что еще я должен сделать? - person Richard; 30.11.2015
comment
Кто-то сказал мне добавить /// ‹reference path=..\..\..\typings\alt\alt.d.ts /› в начало моего .ts-файла. Это сработало. Я думал, что webpack позаботится об этом автоматически, но похоже, что мне нужно добавлять эти ссылки индивидуально в каждый файл. - person Richard; 01.12.2015
comment
Вам не нужно добавлять его в каждый файл. Его просто нужно загрузить один раз для всей программы. (так что вы можете поместить /// <reference /> в свой входной файл, ИЛИ даже лучше использовать массив files tsconfig) - person James Brantly; 01.12.2015
comment
Спасибо, Джеймс Брантли, если вы хотите добавить этот ответ на вопрос, который я открыл, вы можете получить несколько баллов: stackoverflow.com/questions/34018192/ - person Richard; 03.12.2015

@ Ричард, может быть, @Peter Varga answer могу помочь тебе:

Вместо var mongoose = require('mongoose') попробуйте следующее

импортировать мангуста из «мангуста»; //или же

импортировать мангуст = требовать ('мангуст');

person Eugene Bichel    schedule 28.11.2015
comment
Спасибо, я пробовал оба варианта. Я получаю ту же ошибку, хотя вы можете видеть, что слова «требовать» нет даже в моем коде. - person Richard; 29.11.2015