帮助 Rollup 查找外部模块,然后安装,相关配置
import resolve from 'rollup-plugin-node-resolve';
export default {
...
plugins: [
resolve({
module: true, // ES6模块尽可能使用 ‘module’字段
jsnext: true,
main: true
}),
],
}
rollup-plugin-node-resolve 插件可以解决 ES6模块的查找导入,但是npm中的大多数包都是以CommonJS模块的形式出现的,所以需要使用这个插件将CommonJS模块转换为 ES2015 供 Rollup 处理
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
export default {
...
plugins: [
resolve(),
commonjs({
include: 'node_modules/**', // 包括
exclude: [], // 排除
}),
],
}
通过这个插件可以方便的使用 javascript 的新特性,配置上稍微麻烦一些,如下
安装相应插件(包括配置babel 需要的插件)
sudo npm install --save-dev
babel-core
babel-plugin-external-helpers
babel-plugin-transform-runtime
babel-preset-env
babel-preset-stage-2
babel-register
rollup-plugin-babel
rollup.config.js 中配置 babel
plugins: [
resolve(),
commonjs(),
babel({
exclude: 'node_modules/**', // 排除引入的库
runtimeHelpers: true // 配置runtime,不设置会报错
}),
],
创建
.babelrc
babel配置文件
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-runtime", "external-helpers"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["istanbul"]
}
}
}
压缩 js 代码
import uglify from 'rollup-plugin-uglify';
plugins: [
resolve(),
commonjs(),
babel({
exclude: 'node_modules/**',
runtimeHelpers: true
}),
uglify(),
],
代码检查
import eslint from 'rollup-plugin-eslint';
plugins: [
resolve(),
commonjs(),
eslint({
include: ['src/**/*.js'] // 需要检查的部分
}),
babel({
exclude: 'node_modules/**',
runtimeHelpers: true
}),
uglify(),
],
另外,需要创建
.eslintrc
文件配置 eslint 规则
变量替换,可以将动态设置的变量提取出来在配置文件中设置
import replace from 'rollup-plugin-replace';
plugins: [
resolve(),
commonjs(),
replace({
include: 'src/maths.js', // 指定可以使用变量的文件路径
exclude: 'node_modules/**',
ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
HOST: JSON.stringify('http://111/111')
})
],
在 src/maths.js文件中即可使用 ENV HOST
注意: sass 文件转化已经使用另外一个插件代替 查看插件8--
rollup-plugin-postcss
提取 样式文件
import sass from 'rollup-plugin-sass';
export default {
plugins: [
resolve(),
commonjs(),
sass({
output: './dist/css/bundle.css'
}),
babel({
exclude: 'node_modules/**',
runtimeHelpers: true
}),
],
}
2018.04.03 修改
提取样式文件(sass 或者 less 等)添加浏览器前缀 以及压缩
# 注意如果要使用 .sass .scss 类型样式,需要先安装 node-sass
# .less 要安装 yarn add --dev less
sudo yarn add --dev node-sass
# 然后安装
sudo yarn add --dev rollup-plugin-postcss autoprefixer cssnano
import postcss from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';
plugins: [
resolve(),
commonjs(),
postcss({
plugins: [autoprefixer, cssnano],
extract: 'dist/css/bundle.css' // 输出路径
}),
babel({
exclude: 'node_modules/**',
runtimeHelpers: true
}),
]
监听文件变化的插件
sudo npm install --save-dev rollup-watch
然后在 package.json 中设置 scripts属性即可
"build": "rollup -c",
"dev": "rollup -c -w"
开启本地服务
import serve from 'rollup-plugin-serve'
plugins: [
resolve(),
commonjs(),
babel({
exclude: 'node_modules/**',
runtimeHelpers: true
}),
(process.env.NODE_ENV === 'production' && uglify()),
replace({
exclude: 'node_modules/**',
ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
HOST: JSON.stringify('http://111/111')
}),
serve({
open: true, // 是否打开浏览器
contentBase: './', // 入口HTML 文件位置
historyApiFallback: true, // Set to true to return index.html instead of 404
host: 'localhost',
port: 10001,
})
]
实时刷新页面,配合 rollup-plugin-serve 使用
import livereload from 'rollup-plugin-livereload';
plugins: [
resolve(),
commonjs(),
serve({
open: true,
contentBase: './',
historyApiFallback: true,
host: 'localhost',
port: 10001,
}),
livereload()
]