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

最后视频显示出来了

完成！！