Содержание

1 Описание
2 Общее описание
3 Как настроить свой проект

Описание

Документ содержит общее описание и настройки для проектов, которые будут использовать кастомные формы на механизме 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.

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

Так же требуется прописать dependencyManagement для того, что бы в конкретных проектах не указывать версию для bundle с bootstrup

    <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>

Настройка проекта с кастомной формой

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

    <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>
         
        <!--На текущий момент core-components-bundle еще не релизился, а это значит его нужно будет самостоятельно откомпилировать, что бы положить в свой maven -->
        <dependency>
            <groupId>ru.krista.frontend.bundle</groupId>
            <artifactId>core-components-bundle</artifactId>
            <version>1.0.0-SNAPSHOT</version>
        </dependency>

        <!-- Для bootstrap-wrapper версию ставить не надо т.к. мы ее прописали в dependencyManagement в главной pom проекта -->
        <dependency>
            <groupId>ru.krista.core.frontend.style</groupId>
            <artifactId>bootstrap-wrapper</artifactId>
        </dependency>
    </dependencies>

Настрока package.json

В package.json нужно прописать зависимость от наших bundle

  "dependencies": {
    "@krista/components": "^1.0.0",
    "@krista/rackt": "^1.0.2",
    "@krista/runtime": "^1.0.2"
  },

Указав эти зависимости прописывать react, react-bootstrap и т.д. уже не нужно!

В .config\webpack.config.js необходимо указать ManagedCommonReferencePlugin, который позволит не добавлять при компиляции своего проекта в bundle библиотеки типа react, react-bootstrap и прочие из списка поставляемых нами в общих bundle:

  plugins: [
    new ManagedCommonReferencePlugin({manifest: require("@krista/runtime").production}),
    new ManagedCommonReferencePlugin({manifest: require("@krista/rackt").production}),
    new ManagedCommonReferencePlugin({manifest: require("@krista/components").production}),
...
    new AmdNamespaceForUmdLibrary(),
...
  ]

Содержимое @krista/rackt 1.0.2

"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"

Содержимое @krista/runtime 1.0.2

Immutable
fetch
lodash
babel-runtime
...

Настройка settings.xml для maven

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


<profiles>
    <!-- Профиль для компиляции frontend приложений основанных на webpack -->
    <profile>
      <id>rebuild-frontend-bundle</id>
      <properties>
        <frontend.bundle.rebuild>true</frontend.bundle.rebuild>
      </properties>
    </profile>
</profiles>
...
<activeProfiles>
    <activeProfile>rebuild-frontend-bundle</activeProfile>
</activeProfiles>

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

Иначе, придеться мавен запускать так

mvn -Dfrontend.bundle.rebuild

Настройки .npmrc

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

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

Публикация

npm login registry https://ntp-nexus3.krista.ru/repository/npm-hosted/ --scope krista

Участник:Elena/Инфо