Visual Studio 2015 JSX/JSX 2015语法用babel突出显示

Question

我想做的事：

基于this的答案，我想看看我是否可以用预置的react、es2015和stage-1把react-tools转换器换成babel-core转换器。

VS2015社区使用节点服务器上的react工具动态地传输代码，nodeJs server.js文件位于：

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

transformJsxFromPost函数中的以下行执行转换，并将elementMap返回到visual：

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

启动VS时，这将在本地应用程序数据中创建一个临时文件夹，并在以下位置启动节点服务器：

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

到目前为止：-- visual 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并使其工作，我将返回一个sourceMap (诚然，它的格式与react-tools elementMap的格式不同)。

我陷入困境的：，当我试图让babel使用预设时，我就会出错。因此，当我将第一行改为：

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

我知道错误：

JSX :无法找到相对于目录\"C:\Users\“的预设\”‘t 2015\“

预设是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]

我在一个类似的问题上添加了一个here的答案。