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環境）

最後視頻顯示出來了

完成！！