挂在 ts-loader (webpack) 上的“npm run”

Posted 2023-03-13

【中文标题】挂在 ts-loader (webpack) 上的“npm run”

【英文标题】："npm run" hanging on ts-loader (webpack)

【发布时间】：2016-06-03 18:55:18

【问题描述】：

我正在使用 Mac OS X 10.11.3 上的 webpack 构建一个包含静态 html 和其他资产的 Web 应用程序。该应用与另一台服务器上的 API 通信。

我在使用 webpack 构建应用时遇到了问题。构建过程似乎在 ts-loader 执行时或周围挂起。我正在像这样运行我的构建：

npm run go --loglevel verbose

从我的 package.json 执行这个命令：

./node_modules/.bin/webpack-dev-server --display-reasons --display-chunks --watch

终端窗口中的输出以

结尾

ts-loader: Using typescript@1.7.5 and /Users/mn/Documents/source/J/appstore/store-front/app/ts/tsconfig.json

我已尝试删除 node_modules 文件夹并重新安装它们；我试过卸载 webpack 并重新安装；我尝试将我的 webpack.config.js 恢复为我知道有效的版本；但它只是挂在这里！

我的 webpack.config.js 看起来像这样：

var webpack = require('webpack'),
    ReloadPlugin = require('webpack-reload-plugin'),
    path = require('path'),
    ChunkManifestPlugin = require('chunk-manifest-webpack-plugin'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    WebpackNotifierPlugin = require('webpack-notifier'),
    ExtractTextPlugin = require("extract-text-webpack-plugin");

/**
 * optimist has been depracted. Find an alternative? minimist?  
 */
var argv = require('optimist')
    .alias('r', 'release').default('r', false)
    .argv;

/**
 * Useful variables
 */
var cwd = process.cwd();
var DEBUG = !argv.release;
var isDevServer = process.argv.join('').indexOf('webpack-dev-server') > -1;
var version = require(path.resolve(cwd, 'package.json')).version;
var reloadHost = "0.0.0.0";
var npmRoot = __dirname + "/node_modules";
var appDir = __dirname + "/app";

var entry = ["./app/ts/bootstrap"]

if (isDevServer) 
    entry.unshift("webpack-dev-server/client?http://" + reloadHost + ":8080");


function makeConfig(options) 
    return 
        cache: true,
        debug: true,
        verbose: true,
        displayErrorDetails: true,
        displayReasons: true,
        displayChunks: true,
        context: __dirname,
        entry: 
            app: entry,
            vendor: './app/ts/vendor.ts'
        ,
        stats: 
            colors: true,
            reasons: DEBUG
        ,
        devtool: 'source-map',
        recordsPath: path.resolve('.webpack.json'),
        devServer: 
            inline: true,
            colors: true,
            contentBase: path.resolve(cwd, "build"),
            publicPath: "/"
        ,
        output: 
            path: path.resolve(cwd, "build"),
            filename: "[name].js",
            publicPath: "/",
            chunkFilename: "[id].bundle.js",

            // Hot Module Replacement settings:
            hotUpdateMainFilename: "updates/[hash].update.json",
            hotUpdateChunkFilename: "updates/[hash].[id].update.js"
        ,
        plugins: [
            new webpack.IgnorePlugin(/spec\.js$/),
            new webpack.optimize.CommonsChunkPlugin( name: 'vendor', filename: 'vendor.js', minChunks: Infinity ),
            new webpack.optimize.CommonsChunkPlugin( name: 'common', filename: 'common.js', minChunks: 2, chunks: ['app', 'vendor'] ),
            new ExtractTextPlugin("styles.css"),
            new webpack.DefinePlugin(
                VERSION: JSON.stringify(version),
                ENV: JSON.stringify(options.env)
            ),
            new HtmlWebpackPlugin(
                template: path.join(appDir, "index.html"),
            ),
            new ReloadPlugin(isDevServer ? 'localhost' : ''),
            new WebpackNotifierPlugin(
                title: "Jisc AppStore App"
            ),
        ],
        resolveLoader: 
            root: path.join(__dirname, 'node_modules'),
            modulesDirectories: ['node_modules'],
            fallback: path.join(__dirname, "node_modules")
        ,
        resolve: 
            root: [path.resolve(cwd)],
            modulesDirectories: [
                'node_modules', 'app', 'app/ts', '.'
            ],
            extensions: ["", ".ts", ".js", ".json", ".css"],
            alias: 
                'app': 'app',
                'scripts': npmRoot
            
        ,
        module: 
            preLoaders: [
                 test: /\.ts$/, loader: "tslint" 
            ],

            loaders: [
                 test: /\.(png|jp?g|gif)$/, loaders: ["url", "image"] ,
                 test: /\.json$/, loader: 'json' ,
                 test: /^(?!.*\.min\.css$).*\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap") ,
                 test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap'] ,
å                 test: /\.html$/, loader: "html" ,
                 test: /\.ts$/, loader: 'ts', exclude: [/test/, /node_modules/] ,
                 test: /vendor\/.*\.(css|js)/, loader: 'file-loader?name=[path][name].[ext]', exclude: [/node_modules/] ,
                 test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader?limit=10000&minetype=application/font-woff" ,
                 test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" 
            ],
            noParse: [
                /\.min\.js/,
                /vendor[\/\\].*?\.(js|css)$/
            ]
        ,
        tslint: 
            emitErrors: false,
            failOnHint: false
        
    


var config = makeConfig(argv)

console.log(require('util').inspect(config,  depth: 10 ))
module.exports = config;

我的 tsconfig.json 看起来像这样：

    "compilerOptions": 
        "target": "es5",
        "module": "commonjs",
        "removeComments": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noEmitHelpers": false,
        "sourceMap": true
    ,
    "filesGlob": [
        "./app/**/*.ts",
        "!./node_modules/**/*.ts"
    ],
    "compileOnSave": false,
    "buildOnSave": false

谁能建议可能发生的事情？我似乎无法从 webpack 开发服务器或 npm 构建生成任何日志。

【问题讨论】：

“filesGlob”选项是非标准的，ts-loader 似乎不支持。尝试改用"files" or "exclude"，看看是否可行。

嗯。没有区别。

有同样的问题；奇怪的是它在几周内都运行良好。

有人解决了吗？

【参考方案1】：

经过数小时的逆向工程 ts-loader 我终于找到了在我的情况下导致这种“冻结”（可能看起来）的原因：

我正在构建一个网络爬虫，并在之前的成功部署和现在失败/冻结的部署之间的哈希目录结构中积累了大约 40Gb 的缓存数据。

原来，由于我忘记在 tsconfig.json 的“排除”选项中包含根缓存目录，所以 ts-loader 正在遍历缓存目录中的所有子文件夹。所以，它实际上并没有挂起，它只是在查看数百万个文件。

当我将缓存目录添加到排除文件选项时，一切恢复正常。

希望这可以帮助您解决问题。如果您想了解 typescript 发生了什么，我建议您在 typescript.js 的 visitDirectory 函数中尝试一些 console.logs。这最终帮助我解决了这个问题。

干杯 山姆