用rollup.js打包工具做一个简易编辑器

平时用webpack的场景比较多，rollup.js的使用机会不是很多，所以做一个小的项目来练练手。

项目的目录结构是这样的，简单的来介绍一下。

项目支持了scss和typescript，然后用rollup.js 来做打包。

build 文件夹是rollup打包的配置，三个文件，一个开发，一个正式，一个base。

dist是打包目录

src是主要的文件夹，我这里放了一个css文件夹，和一个util文件夹，还有就是跟编辑器相关的文件。

相关安装包

## 安装 rollup.js 基础模块
npm i --save-dev rollup 

## 安装 rollup.js css编译插件模块
npm i --save-dev rollup-plugin-postcss 

## 安装 rollup.js 编译本地开发服务插件
npm i --save-dev rollup-plugin-serve

## 安装 rollup.js 编译代码混淆插件
npm i --save-dev rollup-plugin-uglify

## 安装 rollup.js 编译ES6+的 babel 模块
npm i --save-dev @rollup/plugin-babel @babel/core @babel/preset-env

## 安装 css 编译解析插件
npm i --save-dev rollup-plugin-postcss
## 安装 scss 编译插件
npm i --save-dev node-sass

编译基本配置

const path = require('path');const { babel } = require('@rollup/plugin-babel');const postcss = require('rollup-plugin-postcss');const sass = require('node-sass');const typescript = require('@rollup/plugin-typescript');const resolveFile = function(filePath) {  return path.join(__dirname, '..', filePath)}const isProductionEnv = process.env.NODE_ENV === 'production'const babelOptions = {  "presets": ['@babel/preset-env'],  "exclude": ['node_modules/**' ]}const processSass = function(context, payload) {  return new Promise(( resolve, reject ) => {    sass.render({      file: context    }, function(err, result) {      if( !err ) {        resolve(result);      } else {        reject(err)      }    });  })}module.exports = [  {    input: resolveFile('src/index.ts'),    output: {      file: resolveFile('dist/editor.js'),      format: 'umd',      name: 'editor',    },     plugins: [      typescript(),      postcss({        extract: true,        minimize: isProductionEnv,        extensions:['css', 'scss'],        process: processSass,      }),      babel(babelOptions),          ],  },]

开发模式

process.env.NODE_ENV = 'development';const path = require('path');const serve = require('rollup-plugin-serve');const configList = require('./rollup.config');const resolveFile = function(filePath) {  return path.join(__dirname, '..', filePath)}const PORT = 3000;const devSite = `http://127.0.0.1:${PORT}`;const devPath = path.join('example', 'index.html');const devUrl = `${devSite}/${devPath}`;setTimeout(()=>{  console.log(`[dev]: ${devUrl}`)}, 1000);configList.map((config, index) => {  config.output.sourcemap = true;  if( index === 0 ) {    config.plugins = [      ...config.plugins,      ...[        serve({          port: PORT,          contentBase: [resolveFile('')]        })      ]    ]  }  return config;})module.exports = configList;

正式模式

process.env.NODE_ENV = 'development';const path = require('path');const serve = require('rollup-plugin-serve');const configList = require('./rollup.config');const resolveFile = function(filePath) {  return path.join(__dirname, '..', filePath)}const PORT = 3000;const devSite = `http://127.0.0.1:${PORT}`;const devPath = path.join('example', 'index.html');const devUrl = `${devSite}/${devPath}`;setTimeout(()=>{  console.log(`[dev]: ${devUrl}`)}, 1000);configList.map((config, index) => {  config.output.sourcemap = true;  if( index === 0 ) {    config.plugins = [      ...config.plugins,      ...[        serve({          port: PORT,          contentBase: [resolveFile('')]        })      ]    ]  }  return config;})module.exports = configList;

编辑器

设置可编辑

let ele = createElement(root, "div", "editor_container")
ele['contentEditable'] = "true"

加粗

document.execCommand("bold", false, null)

设置标题

document.execCommand("formatBlock", false, "H1")

设置颜色

document.execCommand("foreColor", false, e.target.value)

参考

1. Rollup.js 实战学习笔记  chenshenhai.github.io/rollupjs-no…
2. github地址 github.com/shch/simple…