Question

我要做的事情：

基于this回答，我看到我是否可以为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元素的格式不同）。

我陷入困境： 一旦我试图让babel使用预设，我就会收到错误。所以当我把第一行改为：

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

我收到错误：

JSX Parser：无法找到相对于目录的预设\“es2015 \” \“C：\\用户\\

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

我在类似的问题中添加了答案here。

使用babel

1 个答案: