Elena: Новая страница: «=Описание= Документ содержит общее описание и настройки для проектов, которые будут испо…»

2017-11-09T13:46:12Z

Новая страница: «=Описание= Документ содержит общее описание и настройки для проектов, которые будут испо…»

Новая страница

=Описание=
Документ содержит общее описание и настройки для проектов, которые будут использовать кастомные формы на механизме react, react-bootstrap.

=Общее описание=
Существуют системные javascript сборки (bundle), которые располагаются в jar файлах и для загрузки в приложение используют стандартный механизм virtualdir.properties

К таким сборкам относятся:
* ru.krista.frontend.bundle.core-runtime-bundle - сборка с lodash, polifill для fetch, polifil для babel и т.д.
* ru.krista.frontend.bundle.core-rackt-bundle - сборка для react, react-bootstrap, redux и другие сторонние библиотеки
* ru.krista.frontend.bundle.core-components-bundle - сборка с компонентами собственной разработки
* ru.krista.core.frontend.style.bootstrap-wrapper - обертка для bootstrap стилей и шрифтов

=Как настроить свой проект=
Из проекта core2 были убраны все зависимости на javascript bundle, поэтому нужно подключать в предметном проекте самостоятельно.

==Настройка главной pom проекта==
В pom всего проекта, которая наследуется от ru.krista.bootstrap.root.core-based, нужно указать правильную версию.
На текущий момент это 0.2.20. В этой сборке указывается адрес к правильному nexus с npm.

<pre>
<parent>
<groupId>ru.krista.bootstrap.root</groupId>
<artifactId>core-based</artifactId>
<version>0.2.20</version>
<relativePath></relativePath>
</parent>
</pre>

Так же требуется прописать dependencyManagement для того, что бы в конкретных проектах не указывать версию для bundle с bootstrup
<pre>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>ru.krista.core.frontend.style</groupId>
<artifactId>bootstrap-wrapper</artifactId>
<version>${frontend.style.bootstrap-version}</version>
</dependency>
</dependencies>
</dependencyManagement>

<properties>
<frontend.style.bootstrap-version>3.3.5-core-styled</frontend.style.bootstrap-version>
</properties>
</pre>

== Настройка проекта с кастомной формой ==
В pom необходимо прописать зависимости от jar с bundle. В принципе эти зависимости можно проставить в любом проекте, который потом попадет в application.war.

<pre>
<dependencies>
<dependency>
<groupId>ru.krista.frontend.bundle</groupId>
<artifactId>core-runtime-bundle</artifactId>
<version>1.0.2</version>
</dependency>
<dependency>
<groupId>ru.krista.frontend.bundle</groupId>
<artifactId>core-rackt-bundle</artifactId>
<version>1.0.5</version>
</dependency>


<dependency>
<groupId>ru.krista.frontend.bundle</groupId>
<artifactId>core-components-bundle</artifactId>
<version>1.0.0-SNAPSHOT</version>
</dependency>


<dependency>
<groupId>ru.krista.core.frontend.style</groupId>
<artifactId>bootstrap-wrapper</artifactId>
</dependency>
</dependencies>
</pre>

=== Настрока package.json===

В package.json нужно прописать зависимость от наших bundle
<pre>
"dependencies": {
"@krista/components": "^1.0.0",
"@krista/rackt": "^1.0.2",
"@krista/runtime": "^1.0.2"
},
</pre>
'''Указав эти зависимости прописывать react, react-bootstrap и т.д. уже не нужно!'''

В .config\webpack.config.js необходимо указать ManagedCommonReferencePlugin, который позволит не добавлять при компиляции своего проекта в bundle библиотеки типа react, react-bootstrap и прочие из списка поставляемых нами в общих bundle:
<pre>
plugins: [
new ManagedCommonReferencePlugin({manifest: require("@krista/runtime").production}),
new ManagedCommonReferencePlugin({manifest: require("@krista/rackt").production}),
new ManagedCommonReferencePlugin({manifest: require("@krista/components").production}),
...
new AmdNamespaceForUmdLibrary(),
...
]
</pre>

=== Содержимое @krista/rackt 1.0.2===
<pre>
"react",
"react/addons",
"react-dom",
"classnames",
"react-bootstrap",
"react-prop-types",
"react-overlays",
"redux",
"react-redux",
"flux-standard-action",
"react-router",
"history",
"reduce-reducers",
"redux-thunk",
"redux-actions",
"redux-promise"
</pre>
=== Содержимое @krista/runtime 1.0.2===
<pre>
Immutable
fetch
lodash
babel-runtime
...
</pre>

==Настройка settings.xml для maven==
Для разработчика, который будет не только собирать jar с уже откомпилированными js, но и компилировать сам js, имеет смысл указать в settings.xml для maven следующий профиль.

<pre>

<profiles>

<profile>
<id>rebuild-frontend-bundle</id>
<properties>
<frontend.bundle.rebuild>true</frontend.bundle.rebuild>
</properties>
</profile>
</profiles>
...
<activeProfiles>
<activeProfile>rebuild-frontend-bundle</activeProfile>
</activeProfiles>

</pre>

Активация этого профиля, при выполнении сборки мавеном запустит и сборку webpack, т.е. откомпилирует js. Таким образом frontend разработчику не потребуется заботиться о том скомпилировал он js или нет. Мавен все соберет.

Иначе, придеться мавен запускать так
<pre>
mvn -Dfrontend.bundle.rebuild
</pre>

== Настройки .npmrc ==
Для того, что бы npm работал нормально в нашей сетке был поднят кэширующий прокси Nexus.
npm подцепит его если в файле .npmrc который располагается в каталоге пользователя в моем случае C:\Users\nsmirnov

<pre>
registry=http://ntp-nexus3.krista.ru/repository/npm-all/
</pre>

== Публикация ==
npm login registry https://ntp-nexus3.krista.ru/repository/npm-hosted/ --scope krista

Участник:Elena/Инфо - История изменений

Elena: Новая страница: «=Описание= Документ содержит общее описание и настройки для проектов, которые будут испо…»