Rollup+Ts builds the front-end application

preface

Recently, I took over the development of a new requirement, pure HTML template. As I was used to front-end engineering development, it was a bit difficult for me to return to the era of HTML + CSS + JS, so I used Rollup+Ts+Scss for development.

Project structures, 

Initialize the project
npm init

Install required dependencies
yarn add rollup typescript rollup-plugin-postcss rollup-plugin-typescript tslib -D
 Copy the code
  • Rollup-plugin-typescript plugins rely on tslib and need to be installed in advance otherwise tslib dependencies will not be found at runtime.

Configuration tsconfig. Json

// tsconfig.json
{
  "compilerOptions": {
    "outDir": "es".    "target": "ESNext". "declaration": true. "noImplicitAny": true. "removeComments": true. "noUnusedLocals": true  },  "include": [  "src/**/*". "./declaration.d.ts" ]. "exclude": [  "node_modules/**/*"  ] } Copy the code

Install SCSS plug-ins

Install the SCSS plugin
yarn add rollup-plugin-postcss node-sass postcss-cssnext cssnano -D
Copy the code
  • Rollup-plugin-postcss – Plugins allow you to import CSS in JS and generate the appropriate CSS files.

⚠️ V2 extract corresponds to the file path ⚠️ V3 extract corresponds to the absolute path

  • node-sassProcess SCSS files
  • postcss-cssnextThe code is converted to work on older browsers that do not support these syntaxes(e.g. Browser prefix)
  • Cssnano is a plug-in that compresses and simplifies output CSS. You can think of this as JavaScript UglifyJS

Install the template conversion plug-in

yarn add rollup-plugin-generate-html-template -D
Copy the code
  • Rollup-plugin-generate-html-template inserts JS dynamically into HTML. Variables in HTML can also be replaced with the replaceVars parameter

Install local services and hot update plug-ins

yarn add rollup-plugin-serve rollup-plugin-livereload -D
Copy the code
  • Rollup-plugin-serve Local service
  • Rollup-plugin – Livereload hot update plugin

Install the environment variable plug-in

yarn add cross-env -D

// package.json
"scripts": {
    "serve": "cross-env NODE_ENV=development rollup -w -c". "build": "cross-env NODE_ENV=production rollup -c && tsc --declarationDir types". "test": "echo \"Error: no test specified\" && exit 1"  }, Copy the code
  • Cross-env sets the environment variable to load different plug-ins for different environments

The final rollup.config.js is as follows

import babel from 'rollup-plugin-babel'
import { uglify } from 'rollup-plugin-uglify'
import typescript from 'rollup-plugin-typescript'
import postcss from 'rollup-plugin-postcss'
import cssnano from 'cssnano'
import cssnext from 'postcss-cssnext' import template from 'rollup-plugin-generate-html-template' import serve from 'rollup-plugin-serve' import livereload from 'rollup-plugin-livereload' import { name } from './package.json' import { resolve } from 'path'  const isProduction = process.env.NODE_ENV === 'production'  const Plugins = isProduction ? [uglify()] : [serve('dist'), livereload('dist')]  export default {  input: './src/entry.ts'. output: {  file: `./dist/${name}.js`. format: 'esm'. },  watch: {  include: 'src/**'  },  plugins: [  postcss({  plugins: [cssnext, cssnano],  extract: resolve(__dirname, `./dist/${name}.css`) // Output path  }),  typescript(),  babel({  exclude: 'node_modules/**'  }),  template({  template: './index.html'. target: './dist/index.html'. replaceVars: {  '__STYLE_URL__': `${name}.css`  }  }), . Plugins, ] }  Copy the code

After completing the project configuration, you can develop yarn Serve.

Warehouse address: portal

This article is formatted using MDNICE