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

用户名

我想做的是:

基于这个答案,我看到,如果我能换出react-tools互感器为babel-core与预设的变压器reactes2015stage-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 studioExternal\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-toolselementMap的格式不同)。

卡住的地方:一旦我尝试让babel使用预设,我就会出错。因此,当我将第一行更改为:

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

我得到错误:

JSX Parser:找不到相对于目录\“ C:\\ Users \\”的预设\“ es2015 \”

预设都是package.jsonreact-server文件夹中文件的依赖项,并且babel没有任何问题,那么为什么要在temp目录中查找插件?

用户名

在这种情况下,我必须将实际的预设传递给函数,而不是像在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]

在此处为类似问题添加了答案

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章