Make a simple editor with the rollup.js packaging tool

Webpack is usually used in many scenarios, and rollup.js is not used much, so I do a small project to practice my skills.

The directory structure of the project looks like this.

The project supports SCSS and typescript and is packaged in rollup.js.

The Build folder is the rollup package configuration, with three files, one development, one formal, and one base.

Dist is the package directory

SRC is the main folder, I put a CSS folder here, and an util folder, and the files associated with the editor.

A rollup related

Related installation packages

## Install NPM I --save-dev rollup-plugin-postcss ## Install NPM I --save-dev rollup-plugin-postcss ## Install NPM I --save-dev rollup-postcss ## Install ## Install the plugin NPM I --save-dev rollup-plugin-uglify NPM I --save-dev @rollup/plugin- babel@babel /core @babel/preset-env ## Install SCSS compiler plugin NPM I --save-dev node-sassCopy the code

Compiling basic configuration

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), ], }, ]Copy the code

Development mode

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 = {PORT} ` ` http://127.0.0.1:$; 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;Copy the code

A formal model

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;Copy the code

The editor

Settings editable

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

bold

document.execCommand("bold", false, null)
Copy the code

Set the title

document.execCommand("formatBlock", false, "H1")
Copy the code

Set the color

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

Gets the current selected range

window.getSelection().getRangeAt(0)
Copy the code

reference

Rollup.js Practical learning notes
Making the address