使用babel的Visual Studio 2015 JSX / ES2015語法高亮顯示

Question

我要做的是：

基於這個答案，我看到，如果我能換出react-tools轉換為babel-core與預設變壓器react ， es2015和stage-1 。

VS2015社區使用節點服務器上的反應工具來動態地傳輸代碼， nodeJs server.js文件位於：

C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\IDE\\Extensions\\Microsoft\\Web Tools\\External\\react-server

transformJsxFromPost函數中的以下行執行轉換並將elementMap返回到visual studio：

var transformed = reactTools.transformWithDetails(code, { elementMap: true });
result = { elementMappings: transformed.elementMappings };

啟動VS時，會在本地應用程序數據中創建一個臨時文件夾，並在以下位置啟動節點服務器：

%localappdata%\\Temp\\{most-recent-generated-guid-folder}

我到目前為止： visual studio External\\react-tools\\文件夾有一個node_modules文件夾，所以我在那里安裝了以下內容：

npm install babel-core --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-react --save-dev
npm install babel-preset-stage-1 --save-dev

在server.js文件的頂部添加了以下內容：

var babel = require('babel-core');

並將以上提到的transformJsxFromPost中的行替換為以下行：

var transformed = babel.transform(code, {sourceMaps: "inline"});
result = { elementMappings: transformed.map };

在這個階段，重新啟動visual studio並且它工作，我得到一個sourceMap返回（誠然，與react-tools elementMap的格式不同）。

我被困住的地方：一旦我試圖讓babel使用預設，我就會收到錯誤。 所以，當我將第一行更改為：

var transformed = babel.transform(code, {sourceMaps: "inline", presets: ['es2015', 'react', 'stage-1']});

我收到錯誤：

JSX Parser：無法找到相對於目錄“C：\\\\ Users \\\\”的預設\\“es2015 \\”

預設是react-server文件夾中package.json文件中的所有依賴項，並且它與babel沒有任何問題，那么它為什么要查看插件的臨時目錄？

Answer 1

在這種情況下，我不得不將實際預設傳遞給函數，而不是像webpack一樣導入它們並通過字符串傳遞它們的名稱。

我添加了以下導入：

var es2015 = require('babel-preset-es2015');
var react = require('babel-preset-react');
var stage1 = require('babel-preset-stage-1');

並改變了

presets: ['es2015', 'react', 'stage1']

至

presets: [es2015, react, stage1]

我在這里添加了一個類似問題的答案。