用rollup.js打包工具做一个简易编辑器平时用webpack的场景比较多，rollup.js的使用机会不是很多，所以

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

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

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

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

dist是打包目录

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

rollup相关

编译基本配置

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 = 'production';

const { uglify } = require('rollup-plugin-uglify');
const configList = require('./rollup.config');

const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}

configList.map((config, index) => {

  config.output.sourcemap = false;
  config.plugins = [
    ...config.plugins,
    ...[
      uglify()
    ]
  ]

  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)

获取当前选中区间

window.getSelection().getRangeAt(0)

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