Logo

菜单

发布于 2026-01-06 0 阅读
0

使用 Svelte+Rollup 设置 Phoenix DEV's Worldwide Show and Tell Challenge Presented by Mux: Pitch Your Projects!

使用 Svelte+Rollup 配置 Phoenix

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

默认情况下，Phoenix使用 Webpack 进行资源打包。本分步指南将展示如何改用Rollup，以及如何配置 Rollup 以使用Svelte。

为什么选择 Rollup？

Rollup在 tree shake 方面表现尤为出色，能够生成最小的软件包。它由Rich Harris开发，而 Rich Harris 也是 Svelte 的创始人。因此，Rollup 是 Svelte 项目的理想选择。

就我个人而言，我觉得它比 Webpack 更容易理解（但这只是我个人的看法）。

凤凰城设置

首先创建一个不带Webpack 的新项目：

mix phx.new my_app --no-webpack
Enter fullscreen mode Exit fullscreen mode

进入项目，我们开始设置git：

cd my_app
git init
git add .
git commit --message "Initial commit 🐣"
Enter fullscreen mode Exit fullscreen mode

Assets 文件夹设置

既然我们已被告知phx.new不要使用webpack，我们就需要assets自己创建目录：

mkdir -p assets/js assets/css assets/static/images
Enter fullscreen mode Exit fullscreen mode

创建用于存放全局 CSS 的位置：

touch assets/css/global.css
Enter fullscreen mode Exit fullscreen mode

添加一个assets/package.json用于定义所有前端脚本及其依赖项的元素：

{
  "name": "assets",
  "version": "1.0.0",
  "scripts": {
    "deploy": "rollup --config",
    "watch": "rollup --config --watch"
  },
  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^11.0.0",
    "@rollup/plugin-node-resolve": "^7.0.0",
    "rollup": "^1.20.0",
    "rollup-plugin-postcss": "^2.0.5",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^5.1.2",
    "svelte": "^3.0.0",
    "svelte-preprocess": "^3.3.1"
  }
}
Enter fullscreen mode Exit fullscreen mode

安装这些软件包：

(cd assets && yarn)
Enter fullscreen mode Exit fullscreen mode

务必将所有内容node_modules从版本控制中排除：

echo /assets/node_modules >> .gitignore
Enter fullscreen mode Exit fullscreen mode

Rollup 配置

添加基本​​配置assets/rollup.config.js：

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import autoPreprocess from 'svelte-preprocess';
import postcss from 'rollup-plugin-postcss';
import { terser } from 'rollup-plugin-terser';

// it's production mode if MIX_ENV is "prod"
const production = process.env.MIX_ENV == "prod";

export default {
  // main entry point
  input: 'js/main.js',

  // define output path & format and request sourcemaps
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: '../priv/static/js/app.js'
  },

  // define all the plugins we'd like to use
  plugins: [
    // the postcss plugin is used to preprocess css
    // for more info, see: https://www.npmjs.com/package/rollup-plugin-postcss
    postcss(),

    // the svelte plugin converts .svelte files to .js equivalent
    svelte({
      // the preprocessor plugin allows you to use <style type="scss"> or <script lang="typescript"> inside .svelte files
      // for more info, see: https://www.npmjs.com/package/svelte-preprocess
      preprocess: autoPreprocess(),

      // enable run-time checks when not in production
      dev: !production,

      // take css output and write it to priv/static
      css: css => {
        css.write('../priv/static/css/app.css');
      }
    }),

    // the resolve plugin resolves modules located in node_modules folder
    resolve({
      // resolve modules that are designed to run in browser
      browser: true,

      // a dependency in node_modules may have svelte inside it's node_modules folder
      // dedupe option prevents bundling those duplicates
      dedupe: ['svelte']
    }),

    // use commonjs import convention
    commonjs(),

    // for production builds, use minification
    production && terser()
  ],

  // don't clear terminal screen after each re-compilation
  watch: {
    clearScreen: false
  }
}
Enter fullscreen mode Exit fullscreen mode

在开发模式下，Phoenix 可以yarn watch为我们运行。只需添加一个监视器即可config/dev.exs：

--- watchers: []
+++ watchers: [yarn: ["watch", cd: Path.expand("../assets", __DIR__)]]
Enter fullscreen mode Exit fullscreen mode

使用 Svelte

让我们创建第一个 Svelte 文件assets/js/App.svelte：

<script>
  export let name
</script>

<style>
  h1 { color: teal; }
</style>

<h1>Hello {name}!</h1>
Enter fullscreen mode Exit fullscreen mode

我们需要将其挂载到 DOM 中，因此请创建一个入口点.js文件assets/js/main.js：

// import phoenix html helpers (optional)
import 'phoenix_html'

// any css we import will be bundled in app.css
import '../css/global.css'

// import our component
import App from './App.svelte'

// instantiate the component
new App({
  // mount it to `document.body`
  target: document.body,

  // pass some props (optional)
  props: {
    name: 'world'
  }
})
Enter fullscreen mode Exit fullscreen mode

启动服务器

mix phx.server
Enter fullscreen mode Exit fullscreen mode

瞧，你应该能看到“Hello World”✨

示例仓库

您可以在这里找到一个功能齐全的仓库：

https://github.com/joshnuss/phoenix_svelte_rollup_example

另外，我正在制作一个关于 Svelte 的视频课程：https://svelte.video

✌

文章来源：https://dev.to/joshnuss/setup-phoenix-with-svelte-rollup-36dk
使用实用类型转换 TypeScri...
天气 / CSS 100 挑战赛