将现有的Phoenix应用程序从Brunch切换到Webpack

Phoenix 1.4版本以后将使用webpack作为javascript的模块捆绑器。这篇博文介绍了我在现有的Phoenix项目中从Brunch切换到Webpack的步骤。

克隆Phoenix

由于Phoenix 1.4在本博客发表时尚未发布，我们将使用Phoenix源码安装程序生成一个新项目。克隆Phoenix并运行 -

cd phoenix/installer
mix phx.new dev_app --dev

在dev_app/assets 文件夹中运行npm install 。

将这个assets 文件夹复制到现有的Phoenix项目文件夹中，我们要将其从brunch切换到webpack。

删除brunch配置

删除brunch-config.js,package-lock.json &node_modules 文件夹。从现有的package.json 文件中复制所需的依赖关系到assets文件夹中的package.json 文件，但与brunch有关的依赖关系如brunch,babel-brunch 等除外。删除根目录下的package.json。

在将依赖项添加到新的package.json文件后，运行npm install 。

从静态文件夹中复制js和css文件

将js和css文件从web/static 文件夹复制到assets/js &assets/css 文件夹并删除web/static 文件夹。

删除用于启动程序的默认样式

删除assets/css/phoenix.css 及其中的条目assets/css/app.css

更新npm观察脚本

将assets/package.json 中的npm观察脚本更新为：

"watch": "webpack --mode development --watch-stdin"

使用--watch-stdin 选项在stdin（标准输入）关闭时退出nodejs进程。

更新webpack watcher配置

将config/dev.exs 中的 webpack watcher 配置更新为：

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

添加到.gitignore

在assets 下添加node_modules 到.gitignore

/assets/node_modules

更新babel预设

更新项目中需要的babel预置：

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

启动Phoenix并检查webpack

用-启动Phoenix，并检查webpack是否已经构建了js包：

iex -S mix phx.server

并检查webpack是否已经构建了js bundle。