javascript - 在 rollup/buble 中定义浏览器全局

Question

我正在使用 rollup 制作 Preact SSR 应用程序用于捆绑和buble用于 ES2015 转换。目前，我捆绑到客户端构建中的外部模块之一 @horizo​​n/client 使用 WebSocket。目前，由于捆绑使用的是 Node，因此未定义此内容，从而导致构建错误:

/Users/tim/Documents/Tower/node_modules/@horizon/client/lib/index.js:42


var WebSocketCtor = _ref$WebSocketCtor === undefined ? WebSocket : _ref$WebSocketCtor;
                                                         ^

ReferenceError: WebSocket is not defined
    at Horizon (/Users/tim/Documents/Tower/node_modules/@horizon/client/lib/index.js:42:58)
    at Object.<anonymous> (/Users/tim/Documents/Tower/build/server.js:309:34)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Function.Module.runMain (module.js:605:10)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:575:3

请记住，我来自 Webpack和 babel环境。使用这些工具时，我将有一个插件来定义将出现在输出中的内容，但不会出现在 Node 中。我该如何使用 rollup/buble 来做到这一点？

我当前的构建文件如下所示:

const rollup = require('rollup').rollup
const buble = require('rollup-plugin-buble')
const commonjs = require('rollup-plugin-commonjs')
const json = require('rollup-plugin-json')
const nodeResolve = require('rollup-plugin-node-resolve')
const optimizeJs = require('rollup-plugin-optimize-js')
const replace = require('rollup-plugin-replace')
const uglify = require('rollup-plugin-uglify')
const fs = require('fs-extra-promise')
const sass = require('node-sass').render
const cssnano = require('cssnano').process
const purifycss = require('purify-css')
const { name, dependencies } = require('./package')
const swPrecache = require('sw-precache').write
const nodeRev = require('node-rev').default

const server = () => rollup({
  entry: 'src/server/server.js',
  external: Object.keys(dependencies).concat(['fs']),
  plugins: [
    replace({ '__CLIENT__': false }),
    json(),
    commonjs({ extensions: [ '.js', '.json' ] }),
    buble({ jsx: 'h', objectAssign: 'Object.assign' })
  ]
}).then((bundle) => bundle.write({ sourceMap: true, format: 'cjs', dest: `build/server.js` }))

const client = () => rollup({
  entry: 'src/app/entry.js',
  context: 'window',
  plugins: [
    nodeResolve({ jsnext: true, browser: true }),
    commonjs(),
    replace({ '__CLIENT__': true, 'process.env.NODE_ENV': JSON.stringify('production') }),
    buble({ jsx: 'h', objectAssign: 'Object.assign' }),
    uglify(require('./uglify')),
    optimizeJs()
  ]
})
.then((bundle) => bundle.write({ sourceMap: true, format: 'iife', dest: `build/public/bundle.js` }))

const css = () => new Promise((resolve, reject) => sass({ file: `src/app/styles/entry.scss` }, (err, result) => err ? reject(err) : resolve(result)))
  .then(({ css }) => purifycss(['src/app/components/**/*.js'], css.toString()))
  .then((purified) => cssnano(purified, { autoprefixer: { add: true } }))
  .then(({ css }) => fs.outputFileAsync(`build/public/bundle.css`, css))

const sw = () => swPrecache('build/public/sw.js', {
  cacheId: `${name}`,
  directoryIndex: '/',
  staticFileGlobs: [
    '/',
    './build/public/manifest-*.json',
    // './build/public/bundle-*.{css,js}', // depends if we inlineJs, inlineCss or not
    './build/public/*.{gif,png,svg}' // will not preache /icons
  ],
  navigateFallback: '/',
  dynamicUrlToDependencies: {
    '/': ['./src/server/routes/root.js', './build/public/bundle.css', './build/public/bundle.js', './build/public/manifest.json', './package.json'] // bust cache when these change
  },
  skipWaiting: true,
  stripPrefix: './build/public',
  runtimeCaching: [{
    urlPattern: /\/posts/, // handle remote api call
    handler: 'cacheFirst'
  }]
})

const rev = () => Promise.resolve(nodeRev({
  files: './build/public/**/*.*',
  outputDir: './build/public/',
  file: './build/public/assets.json',
  hash: true  // depends if we inlineJs, inlineCss or not
}))

const clean = () => fs.emptyDirAsync('./build')
const copy = () => fs.copyAsync(`src/app/static/`, `./build/public/`)

const tasks = new Map()
const run = (task) => {
  const start = new Date()
  return tasks.get(task)().then(
    () => console.log('\x1b[36m%s\x1b[0m', '[build]', `'${task}' done in ${new Date().getTime() - start.getTime()}ms`),
    (err) => console.error('\x1b[31m%s\x1b[0m', '[build]', `error running '${task}':`, err.stack)
  )
}

tasks
  .set('clean', clean)
  .set('client', client)
  .set('css', css)
  .set('copy', copy)
  .set('rev', rev)
  .set('server', server)
  .set('sw', sw)
  .set('build', () => run('clean')
    .then(() => Promise.all([run('client'), run('css'), run('copy'), run('server')]))
    .then(() => run('rev'))
    .then(() => run('sw'))
  )

run(/^\w/.test(process.argv[2] || '') ? process.argv[2] : 'build')

Answer 1

来自:https://github.com/rollup/rollup/wiki/JavaScript-API#introoutro

intro/outro:字符串 与横幅和页脚类似，不同之处在于代码位于任何特定于格式的包装器内

var code = bundle.generate({
  format: 'umd',
  intro: 'var ENVIRONMENT = "production";'
}).code;