我想做的是:
基于这个答案,我看到,如果我能换出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 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-tools
elementMap的格式不同)。
卡住的地方:一旦我尝试让babel使用预设,我就会出错。因此,当我将第一行更改为:
var transformed = babel.transform(code, {sourceMaps: "inline", presets: ['es2015', 'react', 'stage-1']});
我得到错误:
JSX Parser:找不到相对于目录\“ C:\\ Users \\”的预设\“ es2015 \”
预设都是package.json
react-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] 删除。
我来说两句