Настройка Webpack и React с помощью Phoenix 1.3 (с развертыванием Heroku)

Если вы создаете приложение с упором на внешний интерфейс. Вы можете использовать Webpack. Особенно, если вы тоже хотите добавить React в свой проект.

Мы можем вручную заменить Brunch на Webpack. Это избавит от многих головных болей при развертывании приложения Phoenix (сам по себе сложный процесс).

Начиная с версии 1.4, Phoenix будет поддерживать его из коробки для управления активами.

Спасибо Виталию Татаринцеву за первоначальное руководство.

Настроить веб-пакет

Нам нужно удалить всю конфигурацию бранча, которая уже есть в нашем проекте.

В качестве первого шага мы должны удалить следующие библиотеки из зависимостей разработки файла package.json:

"devDependencies": {
  "babel-brunch": "...",
  "brunch": "...",
  "clean-css-brunch": "...",
  "uglify-js-brunch": "...",
  ...
}

(и любые другие зависимости Brunch, которые у вас могут быть)

Установите новые необходимые зависимости:

cd assets
npm install babel-core babel-loader@7 babel-preset-env --save-dev
npm install webpack webpack-cli --save-dev
npm install copy-webpack-plugin css-loader mini-css-extract-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin --save-dev

Примечание. На момент написания этой статьи Вавилон 7 только что вышел. Если вы хотите использовать последнюю версию Babel, игнорируйте babel-loader@7 и используйте babel-loader. Вам придется немного отладить имена пресетов.

Откройте снова package.json и измените:

"scripts": {
  "deploy": "brunch build --production",
  "watch": "brunch watch --stdin"
},

"scripts": {
  "deploy": "webpack --mode production",
  "watch": "webpack --mode development --watch"
},

Теперь удалите файл brunch-config.js.

rm brunch-config.js

Создайте новый файл: assets/webpack.config.js со следующим содержимым:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  entry: './js/app.js',
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '../priv/static/js')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '../css/app.css' }),
    new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
  ]
});

Добавьте import css from "../css/app.css" поверх файла assets/js/app.js

В config/dev.exs изменении

watchers: [node: ["node_modules/brunch/bin/brunch", "watch", "--stdin", 
cd: Path.expand("../assets", __DIR__)]]

to:

watchers: [node: ["node_modules/webpack/bin/webpack.js", "--mode", "development", "--watch-stdin",
cd: Path.expand("../assets", __DIR__)]]

Создайте файл assets/.babelrc со следующим содержимым:

{
    "presets": [
        "env"
    ]
}

Если требуется дополнительная настройка, вы можете ознакомиться с документацией babel-preset-env.

Остановитесь на мгновение и запустите свой сервер:

cd .. # If you are inside your /assets directory
mix phx.server

Если у вас есть какие-либо ошибки, выполните предыдущие шаги для отладки.

По умолчанию Phoenix CSS

Мы не включили assets/css/phoenix.css в файл assets/css/app.css.

Phoenix 1.3 предоставляет нам по умолчанию шрифты glyphicons. Однако они не импортируются. Это не было проблемой с бранчем, потому что мы не видим никаких ошибок, связанных с отсутствующими шрифтами, пока не попытаемся их использовать. Этот рабочий процесс меняется с Webpack. Когда Webpack обрабатывает файл, он пытается построить граф зависимостей. Если произойдет ошибка, произойдет сбой.

Если вы хотите использовать assets/css/phoenix.css, вы должны либо удалить строку в уменьшенном файле или импортировать глификонышрифты.

Настроить реакцию

Если вы хотите установить React (или любой другой интерфейсный фреймворк), продолжайте.

Во-первых, давайте установим дополнительные зависимости.

cd assets
npm install --save react react-dom
npm install --save-dev babel-preset-react
cd ..

Расширьте предустановки assets/.babelrc, чтобы иметь также react.

{
    "presets": [
        "env",
        "react"
    ]
}

Сделанный! Импортируйте все файлы JS, как обычно, в файл app.js.

Развертывание на Heroku

Если вы переходите с Brunch на Webpack в рабочем приложении, вам потребуется внести некоторые изменения в развертывание.

На момент написания в сборочных пакетах Heroku по умолчанию используется Brunch.

Настройка пакета сборки

По умолчанию существует сценарий оболочки acompile, который запускается после сборки зависимостей и непосредственно перед завершением сборки. Файл compile выглядит так.

Чтобы настроить хук компиляции вашего приложения, просто добавьте файл compile в корневой каталог вашего приложения. compile — это просто сценарий оболочки, поэтому вы можете использовать любой допустимый код bash. Имейте в виду, что у вас будет доступ к вашим node_modules и mix. Это означает, что если вы используете инструмент сборки Node, отличный от brunch, вы можете просто сделать что-то вроде:

#./компилировать

cd $phoenix_dir
npm --prefix ./assets run build
mix "${phoenix_ex}.digest"

Рекомендуемый файл compile для Webpack:

./node_modules/.bin/webpack -p
cd $phoenix_dir
mix phx.digest

Затем повторно разверните приложение.

Настройка Webpack и React с помощью Phoenix 1.3 (с развертыванием Heroku)