rollup.js_Bundle自动更新

Question

我正在尝试通过 rollup.js 在 VSCode 中进行捆绑销售。

My directory:

----MyProject
--------\node_modules
-----------\.bin
-----------\rollup
--------index.js
--------index.html
--------bundle.js
--------package-lock.json
--------package.json

在我的 .html 文件中，我与 bundle.js 有联系，我在 index.js 中所做的所有更改必须在 bundle.js 中自动更新。但只有当我在终端中运行这个命令时它才有效：rollup index.js --file bundle.js

我的package.json:

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "rollup": "^2.34.2"
  }
}

我需要做什么才能让这个系统自动运行？

Answer 1

首先，我没有配置文件，所以我创建了 rollup.config.js:

import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'

const watch = process.env.ROLLUP_WATCH

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    watch && serve('dist'),
    watch && livereload()
  ]
}

然后我将这 2 个脚本添加到 package.json:

"build": "rollup -c",
"dev": "rollup -c -w"

和运行在终端中：npm run dev

我感谢 vladshcherbin 的帮助！

rollup.js_Bundle自动更新

rollup.js_Bundle automatic update

javascript

html

bundle

vscode-settings

rollupjs