Open Source Adventures: 에피소드 53: Svelte 프로젝트에 대한 JSON 가져오기 설정

이전 에피소드에서 BATTLETECH 무기 데이터에 대한 데이터 내보내기를 만들었습니다. 앱을 작성하기 전에 데이터를 가져와야 합니다.

패키지.json

먼저 기본적으로 JSON 가져오기가 작동하지 않기 때문에 일부 롤업 지옥을 통과해야 합니다.

먼저 npm install --save-dev rollup-plugin-json가 필요합니다. 결과는 package.json입니다.

{
  "name": "svelte-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --no-clear"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-json": "^4.0.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "rollup": "^2.3.4",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "sirv-cli": "^2.0.0"
  }
}

rollup.config.js

그런 다음 rollup-plugin-json를 가져온 다음 플러그인 목록에 json()를 추가해야 합니다. 자바스크립트가 멍청한 번들러 구성 없이 바로 작동하지 않는다는 것은 안타까운 일이지만 우리가 살고 있는 슬픈 세상입니다.

import svelte from 'rollup-plugin-svelte'
import commonjs from '@rollup/plugin-commonjs'
import resolve from '@rollup/plugin-node-resolve'
import livereload from 'rollup-plugin-livereload'
import { terser } from 'rollup-plugin-terser'
import css from 'rollup-plugin-css-only'
import json from 'rollup-plugin-json'

const production = !process.env.ROLLUP_WATCH

function serve() {
  let server

  function toExit() {
    if (server) server.kill(0)
  }

  return {
    writeBundle() {
      if (server) return
      server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
        stdio: ['ignore', 'inherit', 'inherit'],
        shell: true
      })

      process.on('SIGTERM', toExit)
      process.on('exit', toExit)
    }
  }
}

export default {
  input: 'src/main.js',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/build/bundle.js'
  },
  plugins: [
    svelte({
      compilerOptions: {
        // enable run-time checks when not in production
        dev: !production
      }
    }),
    // we'll extract any component CSS out into
    // a separate file - better for performance
    css({ output: 'bundle.css' }),

    // If you have external dependencies installed from
    // npm, you'll most likely need these plugins. In
    // some cases you'll need additional configuration -
    // consult the documentation for details:
    // https://github.com/rollup/plugins/tree/master/packages/commonjs
    resolve({
      browser: true,
      dedupe: ['svelte']
    }),
    commonjs(),
    json(),

    // In dev mode, call `npm run start` once
    // the bundle has been generated
    !production && serve(),

    // Watch the `public` directory and refresh the
    // browser on changes when not in production
    !production && livereload('public'),

    // If we're building for production (npm run build
    // instead of npm run dev), minify
    production && terser()
  ],
  watch: {
    clearScreen: false
  }
}

App.svelte

그런 다음 데이터를 올바르게 가져왔는지 확인할 수 있습니다.

<script>
  import data from "./data.json"
</script>

<h1>Weapons Data</h1>

<table>
  {#each data as row}
    <tr>
      <td>{row.name}</td>
    </tr>
  {/each}
</table>

지금까지의 이야기

All the code is on GitHub .

다음에 온다

이제 데이터 가져오기가 작동했으므로 다음 몇 개의 에피소드에서 BATTLETECH 무기 데이터의 작은 Svelte 대화형 시각화를 만들겠습니다.