2017-08-20 9 views
0

TypeプロジェクトでNodeプロジェクトをセットアップするのに苦労しています。 私のワークフローは次のとおりです。nodemonを使用してノードスクリプトを実行しています。ノードスクリプトはwebpackコンパイラインスタンスを作成し、ファイルシステムをMemoryFSに設定します。 webpackの設定には、TypeScriptとBabelのローダーが含まれています。 webpackがコンパイルを完了した後で、エラーがあれば、私はそれをスローし、そうでなければMemoryFSで結果をフェッチし、eval()を実行してコードを実行します。ノードWebpack eval()sourcemaps

これはすべて問題なく動作します。しかし、私はソースマップのサポートを追加しようとしました。私は 'source-map-support'を追加するwebpackにバナープラグインを追加しました。 webpackでは、devtoolを 'source-map'に設定しました。 tsconfig.jsonでは、sourcemapsオプションが有効になっています。 src/index.tsでは、エラーを投げてしまい、実行時にNodeがエラーの発生場所を教えてくれません。 (ソースマップ)

しかし、私は通常webpackを実行し、次にnode dist/bundle.jsを使って実行します。それは働いている。

コンパイルされた出力を実行するために私がeval()を使用しているために問題があると思います。

SRC/index.ts:

console.log('Hello world'); 

throw new Error('not'); 

build.js:

const path = require('path'); 
const webpack = require('webpack'); 
const MemoryFS = require('memory-fs'); 

const fs = new MemoryFS(); 

const config = require('./webpack.config'); 

const compiler = webpack(config); 

compiler.outputFileSystem = fs; 

compiler.run((err, stats) => { 
    console.clear(); 

    const jsonStats = stats.toJson(); 

    if(jsonStats.errors.length > 0 || jsonStats.warnings.length > 0) 
     return console.log(jsonStats.warning, jsonStats.errors); 

    const result = fs.readFileSync(path.resolve(__dirname, 'dist', 'bundle.js')).toString(); 

    eval(result); 
}); 

webpack.config.js:通常のWebPACK実行してコードを実行した後

const path = require('path'); 
const webpack = require('webpack'); 

const SRC_DIR = path.resolve(__dirname, 'src'); 
const DIST_DIR = path.resolve(__dirname, 'dist'); 

module.exports = { 
    entry: SRC_DIR + '/index.ts', 
    output: { 
     path: DIST_DIR, 
     filename: 'bundle.js' 
    }, 
    devtool: 'source-map', 
    module: { 
     rules: [ 
      { 
       test: /\.js$/, 
       use: 'babel-loader' 
      }, 
      { 
       test: /\.ts$/, 
       use: [ 
        { loader: 'babel-loader' }, 
        { loader: 'ts-loader' }, 
        { loader: 'tslint-loader' } 
       ] 
      } 
     ] 
    }, 
    resolve: { 
     extensions: ['.ts', '.js', '.json'] 
    }, 
    target: 'node', 
    plugins: [ 
     new webpack.BannerPlugin({ 
      raw: true, 
      entryOnly: false, 
      banner: 'require("source-map-support").install();' 
     }), 
     new webpack.NoEmitOnErrorsPlugin() 
    ] 
}; 

webpack && node dist\bundle.js):

C:\Users\shachar\Desktop\graph\dist\webpack:\src\index.ts:3 
throw new Error('not'); 
    ^
Error: not 
    at Object.<anonymous> (C:\Users\shachar\Desktop\graph\dist\webpack:\src\index.ts:3:7) 
    at __webpack_require__ (C:\Users\shachar\Desktop\graph\dist\webpack:\webpack\bootstrap a6ba0885ca7e8b14ee63:19:1) 
    at C:\Users\shachar\Desktop\graph\dist\webpack:\webpack\bootstrap a6ba0885ca7e8b14ee63:62:1 
    at Object.<anonymous> (C:\Users\shachar\Desktop\graph\dist\bundle.js:67:10) 
    at Module._compile (module.js:573:30) 
    at Object.Module._extensions..js (module.js:584:10) 
    at Module.load (module.js:507:32) 
    at tryModuleLoad (module.js:470:12) 
    at Function.Module._load (module.js:462:3) 
    at Function.Module.runMain (module.js:609:10) 

build.jsを使用してそれを実行:

Hello world 
Error: not 
    at Object.eval (eval at compiler.run (C:\Users\shachar\Desktop\graph\build.js:23:5), <anonymous>:75:7) 
    at __webpack_require__ (eval at compiler.run (C:\Users\shachar\Desktop\graph\build.js:23:5), <anonymous>:21:30) 
    at eval (eval at compiler.run (C:\Users\shachar\Desktop\graph\build.js:23:5), <anonymous>:64:18) 
    at eval (eval at compiler.run (C:\Users\shachar\Desktop\graph\build.js:23:5), <anonymous>:67:10) 
    at compiler.run (C:\Users\shachar\Desktop\graph\build.js:23:5) 
    at emitRecords.err (C:\Users\shachar\Desktop\graph\node_modules\webpack\lib\Compiler.js:269:13) 
    at Compiler.emitRecords (C:\Users\shachar\Desktop\graph\node_modules\webpack\lib\Compiler.js:375:38) 
    at emitAssets.err (C:\Users\shachar\Desktop\graph\node_modules\webpack\lib\Compiler.js:262:10) 
    at applyPluginsAsyncSeries1.err (C:\Users\shachar\Desktop\graph\node_modules\webpack\lib\Compiler.js:368:12) 
    at next (C:\Users\shachar\Desktop\graph\node_modules\tapable\lib\Tapable.js:218:11) 

任意の助けてくれてありがとう!

答えて

0

evalを使用してコードを実行すると、ノードはソースマップについて認識しません。おそらく、evalを使用して結果を実行する代わりに、子ノードプロセスを実行しようとするか、evalを使用している理由がありますか? https://nodejs.org/api/child_process.html#child_process_child_process_exec_command_options_callback

+0

私はあなたが何を意味しているのか知っていますが、私に例を教えてください。私は 'child_process.execSync(\' node $ {result} \ ');'を使ってみましたが、まだ成功していません。私はちょうどコンソールに出力されたコードを取得します – shabenda

+0

あなたは実際にファイルを実行しなければなりません - ノードは 'bundle.js.map'でソースマップを探すことを知っています。 'child_process.spawn( 'node'、[DIST_DIR + '/bundle.js']);'多分? – Tommos

+0

いいえ、動作しません。ただ何も印刷されません。私はWebpackの出力にMemoryFSを使用しているため、通常のパスを使って直接実行することができないと思います。私は普通の 'fs'を使うことができたかもしれませんが、開発時にはディレクトリに出力したくありません。 – shabenda