Question

我目前正在转换项目以使用Webpack进行捆绑。

在我的Typescript文件中，我按照下面的方式导入模块，并且没有任何错误以及智能感知。

import * as $ from "jquery";
import * as CrudHelper from "../../ts-helpers/crud-helper";
import { ExportToExcel } from "../../ts-helpers/export-helper";
import { getParameterByName } from "../../ts-helpers/utils";

这与webpack一起工作但是事实证明，由visual studio创建的已编译的JS文件仍然存在，我已经关闭了打字稿编译。

删除js文件后，当我运行webpack.config时，我发现模块未找到错误，如

Module not found: Error: Can't resolve '../../ts-helpers/crud-helper' in 'C:\Users\alexl\git\eServicesWebpack\eServices\src\eServices.Web\Client\ts\Areas\Employee'
 @ ./Client/ts/Areas/Employee/Absence.ts 4:17-56
 @ multi ./Client/ts/Areas/Employee/Absence.ts

我的tsconfig看起来像

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "allowJs": true
  },
  "exclude": [
    "node_modules",
    "wwwroot",
    "typings"
  ]
}

tsconfig是否遗漏了什么？

修改

这是我的webpack.config

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var glob = require('glob');

var files = glob.sync("./Client/ts/Areas/**/*.ts");

var entry = {
    'vendor': "./Client/ts/Vendor.ts"
}

files.forEach(function (e) {
    var split = e.split('/');
    var entryName = "";
    if (split[5].indexOf('Modal') > -1) {
        entryName = split[4] + '/' + split[5].split('.')[0].replace('Modal', '') + '/' + split[5].split('.')[0];
    } else {
        entryName = split[4] + '/' + split[5].split('.')[0].replace('Modal', '') + '/' + split[5].split('.')[0].replace('Modal', '');
    }

    if (entry[entryName] === undefined) {
        entry[entryName] = [];
    }
    entry[entryName].push(e);
});

module.exports = function () {
    return {
        entry: entry,
        output: {
            path: path.resolve(__dirname, "../wwwroot/dist"),
            filename: "[name].bundle.js"
        },
        plugins: [
            //chunk vendor code into own bundle
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                minChunks: function (module) {
                    return module.context && module.context.indexOf('node_modules') !== -1;
                }
            }),
            //chunk webpack runtime code co vendor code can be cached
            new webpack.optimize.CommonsChunkPlugin({
                name: 'manifest'
            }),
            new ExtractTextPlugin('styles.css'),
            //protect against old libraries that reference jquery symbols
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery"
            })
        ],
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                        use: 'css-loader'
                    })
                },
                {
                    test: /\.ts$/,
                    use: "awesome-typescript-loader"
                },
                {
                    test: /\.(jpg|png|gif)$/,
                    use: 'file-loader'
                }, {
                    test: /\.(woff|woff2|eot|ttf|svg)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 100000
                        }
                    }
                }
            ]
        }
    }
};

Answer 1

将'.ts'添加为可解析的扩展名。

resolve: { 
    extensions: ['.ts', '.tsx', '.js', '.jsx']
}

Answer 2

你是否在webpack.config文件中使用任何加载器作为你的ts文件？你应该有这样的东西

module:{
 loaders:[
       { 
                test: /\.tsx?$/, 
                loader: 'ts-loader'
        },
  ]
}

从评论更新：

resolve: { 
     // Add '.ts' as resolvable extensions. 
     extensions: ["", ".webpack.js", ".web.js", ".ts", ".js"] 
}

导入Typescript时找不到Webpack模块

2 个答案: