Rollup development environment setup

Time:2022-1-14

Rollup development environment setup

image-20210815222527524

Initializing projects managing projects using lerna

usenpm initInitialize project

npm init -y

installlernaAnd initialize the project

npm install lerna --save-dev
#NPX uses node_ Packages in modules
npx lerna init

The following directory structure has been generated

two-ui
└───node_modules
└───packages
│		lerna.json
│		package.json

installrollupAnd createrollup.config.jsfile

npm install rollup --save-dev
touch rollup.config.js
#Vscode open rollup profile
code rollup.config.js

Install the following plug-ins

Package name effect
rollup-plugin-commonjs Convert commonjs module to ES6
@rollup/plugin-node-resolve On node_ Find and bind third-party dependencies in the module
@rollup/plugin-json Convert JSON file to ES6 module
@rollup/plugin-babel Rollup Babel plugin
@babel/core Babel core module
@babel/preset-env babel
@babel/preset-typescript Babel treatment TS
@vue/babel-plugin-jsx Write Vue in TSX
vue vue
rollup-plugin-terser Optimize code
rimraf Delete tool
@rollup/plugin-replace Replace environment variable
rollup-plugin-serve Development server
rollup-plugin-livereload Hot update service
rollup-plugin-less less
@rollup/plugin-alias path alias
eslint Code format verification
inquirer Command line interaction
cross-env Setting environment variables
child_process Create a child thread to execute commands
plop Create directory structure from template
typescript TS module

stayrollup.config.jsWrite the following inrollupto configure

import path from 'path'
//Convert commonjs module to ES6
import commonjs from 'rollup-plugin-commonjs'
//On node_ Find and bind third-party dependencies in the module
import resolve from '@rollup/plugin-node-resolve'
//Convert JSON file to ES6 module
import json from '@rollup/plugin-json'
//Rollup Babel plugin
import { babel } from '@rollup/plugin-babel'
//Optimize code 
import { terser } from 'rollup-plugin-terser'
//Delete tool
import rm from 'rimraf'
//Replace environment variable
import replace from '@rollup/plugin-replace'
//Development server
import serve from 'rollup-plugin-serve'
//Hot update service
import livereload from 'rollup-plugin-livereload'
//Less processing
import less from 'rollup-plugin-less'
//Path alias
import alias from '@rollup/plugin-alias';


//Get entry file
const input = process.env.INPUT_FILE
//Development environment or production environment
const NODE_ENV = process.env.NODE_ENV
//Determine whether it is a production environment
const isPro = function () {
  return NODE_ENV === 'production'
}
//The path of the currently executing command
const root = process.cwd()
//Get the package. For each package JSON file
const pkg = require(path.resolve(root, 'package.json'))
//Suffix
const extensions = ['.js', '.jsx', '.ts', '.tsx', '.less']
//Excluded packaging 
const external = ['vue']
//The development environment packages only ESM
const output = [{
  exports: 'auto',
  file: path.join(root, pkg.module),
  format: 'es',
}]

//In case of production environment
if (isPro()) {
  //Also discharge the package written by yourself
  external.push(/@two-ui/)
  //Pack other bags
  output.push({
    exports: 'auto',
    file: path.resolve(root, pkg.main),
    format: 'cjs'
  })
}

//Delete dist directory
rm(path.resolve(root, 'dist'), err => {
  if (err) throw err
})

export default {
  input,
  output,
  external,
  //Monitored files
  watch: {
    exclude: 'node_modules/**'
  },
  //Do not participate in packaging
  plugins: [
    resolve({
      preferBuiltins: false,
      mainFields: ['module', 'main'],
      extensions
    }),
    less({
      //Only in development mode can it be inserted into the page
      insert:  isPro() ? false: true,
      output: 'dist/style/main.css',
    }),
    babel({
      babelHelpers: 'bundled',
      extensions,
      exclude: [
        '*.config.js',
        'packages/**/node_modules/*.d.ts',
        'node_modules/*.d.ts',
        '**/dist/**/*',
        '**/demo/*'
      ]
    }),
    commonjs(),
    json(),
    //Production mode compresses the code
    isPro() && terser(),
    //Hot renewal
    !isPro() && livereload({
      watch: ['dist', 'demo'],
      verbose: false
    }),
    //Development mode replacing environment variables
    !isPro() && replace({
      'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
      "vue": "/vue.esm-browser.js"
    }),
    //Open static server in development mode
    !isPro() &&  serve({
      open: true,
      port: 8080,
      contentBase: [path.resolve(root, 'dist'), path.resolve(root, 'demo'), path.resolve(__dirname, 'node_modules/vue/dist')],
      openPage: 'demo/index.html'
    })
  ]
}

Add start command (this is in each separate package)

{
  "scripts": {
    "build:dev": "cross-env NODE_ENV=development INPUT_FILE=./src/index.ts rollup -c ../../rollup.config.js -w",
    "build:pro": "cross-env NODE_ENV=production INPUT_FILE=./src/index.ts rollup -c ../../rollup.config.js"
  }
}

establishbabel.config.jsonFile and write the following configuration

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ],
    "plugins": [
        "@vue/babel-plugin-jsx"
    ]
}

initializationeslintInitialize eslint according to options

npx eslint --init

Add a format command to verify whether the format is correct and repair the format

{
  "lint": "eslint ./packages --ext ts --ext tsx",
  "fix": "eslint ./packages --ext ts --ext tsx --fix"
}

establish.eslintignoreFile addition ignores files that need to be verified

node_modules
dist
rollup.config.js
packages/**/dist/
packages/**/*.d.ts
*.d.ts
/**/*.d.ts
es
lib

establishplopTemplate

mkdir plop-template/component
cd plop-template/component

Create a directory structure

component
└───demo
│		│	 index.hbs
└───src
│		│	 component.hbs
│		│	 index.hbs
│		babel.config.json
│		LICENSE
│		package.hbs
│		README.hbs

establishplopfile.jsconfiguration file

module.exports = plop => {
  plop.setGenerator('component', {
    description: 'create a custom component',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'component name',
        default: 'MyComponent'
      }
    ],
    actions: [
      {
        type: 'add',
        path: 'packages/{{name}}/src/index.ts',
        templateFile: 'plop-template/component/src/index.hbs'
      },
      {
        type: 'add',
        path: 'packages/{{name}}/demo/index.html',
        templateFile: 'plop-template/component/demo/index.hbs'
      },
      {
        type: 'add',
        path: 'packages/{{name}}/src/{{name}}.tsx',
        templateFile: 'plop-template/component/src/component.hbs'
      },
      {
        type: 'add',
        path: 'packages/{{name}}/babel.config.json',
        templateFile: 'plop-template/component/babel.config.json'
      },
      {
        type: 'add',
        path: 'packages/{{name}}/package.json',
        templateFile: 'plop-template/component/package.hbs'
      },
      {
        type: 'add',
        path: 'packages/{{name}}/LICENSE',
        templateFile: 'plop-template/component/LICENSE'
      },
      {
        type: 'add',
        path: 'packages/{{name}}/README.md',
        templateFile: 'plop-template/component/README.hbs'
      }
    ]
  })
}

Warehouse addresshttps://github.com/kspf/two-ui

Original address: https://kspf.xyz/archives/141/