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)
任意の助けてくれてありがとう!
私はあなたが何を意味しているのか知っていますが、私に例を教えてください。私は 'child_process.execSync(\' node $ {result} \ ');'を使ってみましたが、まだ成功していません。私はちょうどコンソールに出力されたコードを取得します – shabenda
あなたは実際にファイルを実行しなければなりません - ノードは 'bundle.js.map'でソースマップを探すことを知っています。 'child_process.spawn( 'node'、[DIST_DIR + '/bundle.js']);'多分? – Tommos
いいえ、動作しません。ただ何も印刷されません。私はWebpackの出力にMemoryFSを使用しているため、通常のパスを使って直接実行することができないと思います。私は普通の 'fs'を使うことができたかもしれませんが、開発時にはディレクトリに出力したくありません。 – shabenda