2016-03-30 5 views
3

Что я Тринг делать:Visual Studio 2015 JSX/ES2015 подсветка синтаксиса с Вавилонской

основе this ответа, я вижу, могу ли я поменять на react-tools трансформатор для babel-core трансформатора с предустановками для react , es2015 и stage-1.

VS2015 сообщество использует реагировать инструменты на сервере узла для transpile код на лету, то nodeJsserver.js файл расположен по адресу:

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

Следующие строки функции transformJsxFromPost сделать tranformation и возврат elementMap визуальная студия:

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

при запуске VS, это создает временную папку в локальных данных приложения и начинаешься сервер узла по следующему адресу:

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

Где я получил до сих пор: Визуальной папки студии 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 elementMap все же).

Где я застрял: Как только я попытаюсь заставить babel использовать пресеты, я получаю ошибки. Поэтому, когда я изменить первую строку:

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

Я получаю ошибку:

JSX Parser: Couldn't find preset \"es2015\" relative to directory \"C:\\Users\\

пресеты все зависимости в package.json файл в папке реагировать-сервера, и это не имея каких-либо проблем с babel, так почему он ищет в каталоге temp для плагина?

ответ

2

Мне пришлось передать фактические пресеты функции в этом случае вместо их импорта и передать их имя по строке, как в 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 на подобный вопрос.

Смежные вопросы