chimee 播放器 在rollup打包器中使用后的各种报错汇总

目录结构：

rollup.config.js代码

export default [{
  input: './src/js/video.js',
  output: {
    file: './dist/index.js',
    format: 'umd'
  }
}];

video.js代码

需要npm install --save chimee安装依赖后再使用，详见chimee文档

import Chimee from 'chimee';
const chimee = new Chimee({
  wrapper: '#wrapper',
  src: 'http://cdn.toxicjohann.com/lostStar.mp4',
  controls: true,
  autoplay: true,
});

问题一：执行rollup -c 打包 出现警告

解决： npm install -D rollup-plugin-node-resolve 和 rollup-plugin-commonjs 依赖

import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
export default [{
  input: './src/js/video.js',
  output: {
    file: './dist/index.js',
    format: 'umd'
  },
  plugins: [
    resolve(),
    commonjs()
  ]
}];

再继续打包

可见打包正常

问题二： 此时查看浏览器，浏览器报错

解决：使用rollup-plugin-replace依赖

import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import replace from 'rollup-plugin-replace'
const env = process.env.NODE_ENV;
export default [{
  input: './src/js/video.js',
  output: {
    file: './dist/index.js',
    format: 'umd'
  },
  plugins: [
    resolve(),
    commonjs(),
    replace({
      'process.env.NODE_ENV': JSON.stringify(env)
    }),
  ]
}];

此时，打包和浏览器就都正常了。

问题三： 在package.json中配置rollup打包命令

解决： 我们知道在终端进行打包的命令是 rollup -c,所以可以把这个命令加到package.json的scripts中

"scripts": {
    "build": "rollup --c"
  },

此时，在终端就可以 npm run build 进行rollup的打包

可以看到，打包成功

问题四：scripts中使用nodeJS的env,判断全局环境(生产，开发)

解决： npm install -D cross-env,并且在package.json中使用

"scripts": {
    "build": "cross-env NODE_ENV=produciton rollup --c"
  },

再来执行npm run build， 这样就能区分线上或者线下代码啦。
此时完整的rollup.config.js代码是这样的：

import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import replace from 'rollup-plugin-replace'

const env = process.env.NODE_ENV;
console.log(env)
export default [{
  input: './src/js/video.js',
  output: {
    file: './dist/index.js',
    format: 'umd'
  },
  plugins: [
    resolve(),
    commonjs(),
    replace({
      'process.env.NODE_ENV': JSON.stringify(env)
    }),
  ]
}];

可见终端有输出当前是production环境（因为我们执行的是npm run build, 在scripts中有定义 cross-env NODE_ENV=produciton，这个就是production环境）

最后视频显示出来了

完成！！