Я большой поклонник TypeScript. Для больших проектов это незаменимо. Однако большинство приложений SharePoint Framework (SPFx) невелики по конструкции. SharePoint Framework предназначен для небольших одноцелевых приложений, расширяющих функциональность SharePoint. Это не означает, что вы никогда не напишете приложение SPFx с более чем 100 000 строк кода, но такие приложения не распространены в контексте приложений SPFx.
TypeScript имеет свою цену. На мой взгляд, для больших приложений это того стоит. Безопасность типов поможет вам устранить целые классы ошибок. Однако это преимущество связано с необходимостью выполнения строгой проверки типов компилятором для всего вашего кода. В приложениях React Props и State немного усложняют задачу.
Для большинства приложений SPFx я предпочитаю использовать es2015 + для создания компонентов React. Я не люблю сражаться с компилятором TypeScript за небольшие приложения, для создания которых был разработан SPFx.
В этой статье я объясню, как использовать es2015 или новее для создания приложений SPFx.
Для этого нет шаблона, поэтому мы будем использовать шаблон React, который поставляется с генератором SPFx Yeoman. Для начала создайте свое приложение, используя:
mkdir my-project cd my-project yo @microsoft/sharepoint
Вы можете принять все значения по умолчанию, кроме вопроса, показанного ниже. Выберите React, когда вас спросят: «Какой фреймворк вы хотите использовать?».
Затем нам нужно добавить зависимости для Babel и его друзей, чтобы преобразовать наш код esNext в JavaScript, который может понять большинство браузеров.
Перейдите в окно консоли в каталоге, который мы создали для нашего проекта, и выполните следующую команду:
yarn add babel-loader babel-core babel-preset-env babel-preset-react babel-plugin-transform-class-properties -D
или с NPM:
npm i add babel-loader babel-core babel-preset-env babel-preset-react babel-plugin-transform-class-properties --save-dev
Все эти зависимости переносят наш футуристический JavaScript. Однако для облегчения работы с React используется babel-plugin-transform-class-properties. Это предлагаемая функция спецификации EcmaScript. Это позволяет нам использовать такие свойства класса:
class MyComponent extends React.Component { handleSubmit = () => { // Code here } }
С помощью этого синтаксиса мы можем избежать загромождения конструктора вызовами .bind (this), поскольку стрелочные функции автоматически устанавливают контекст «this» для включающего класса.
Файл webpack.config.js не отображается как часть процесса сборки SPFx. Однако предоставляется API, который позволяет нам настраивать сборку. Мы будем использовать это из глотка. Добавьте следующий код в файл gulpfile.js чуть выше этой строки:
build.initialize(gulp);
Код для добавления:
build.configureWebpack.mergeConfig({ additionalConfiguration: (generatedConfiguration) => { generatedConfiguration.module.rules.push( { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', } }); return generatedConfiguration; }});
Приведенный выше код объединяет новый объект конфигурации с конфигурацией Webpack. Однако нам все еще нужно настроить Babel. Для этого воспользуемся файлом package.json.
Добавьте в package.json следующий код:
"babel": { "presets": [ "env", "react" ], "plugins": [ "babel-plugin-transform-class-properties" ] },
Я предпочитаю добавлять его прямо в раздел «сценарии» и над зависимостями, но вы можете разместить его где угодно на верхнем уровне объекта.
На этом этапе нам нужно преобразовать приложение TypeScript в JavaScript.
Сначала переименуйте все файлы .ts или .tsx в .js. Затем удалите файл «/app/components/IHelloWorldProps.ts», а затем удалите для него оператор импорта в HelloWorldWebPart.js.
Затем выполните и удалите все аннотации типов из файлов .js, которые вы переименовали ранее. Также удалите все операторы импорта, которые втягивают Props. После внесенных выше изменений вы сможете запустить «gulp serve», и на этом этапе вы сможете создавать свои компоненты с помощью es2015 +, компилировать и корректно работать в браузере.
Я всегда ценю отзывы, напишите мне на https://twitter.com/mike_morrison