Visual Studio 2015 JSX/ES2015 语法高亮与 babel答案

【问题标题】：Visual Studio 2015 JSX/ES2015 syntax highlighting with babelVisual Studio 2015 JSX/ES2015 语法高亮与 babel
【发布时间】：2016-07-18 23:56:07
【问题描述】：

我想做的事：

根据this 的回答，我正在查看是否可以将react-tools 变压器换成babel-core 变压器，并预设react、es2015 和stage-1。

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 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 那里安装了以下内容：

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 解析器：找不到相对于目录的预设 \"es2015\" \"C:\\用户\\

presets都是react-server文件夹下package.json文件中的依赖，babel没有问题，为什么要在临时目录下找插件呢？

【问题讨论】：

标签： babeljs react-jsx visual-studio-2015

【解决方案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。

【讨论】：