Rollup+Ts构建前端应用

前言

最近接手一个新的需求，纯html模版开发，对于已经习惯前端工程化开发的我来说，再回到html+css+js的时代，着实有点苦难，于是利用Rollup+Ts+Scss来进行开发。

项目搭建

# 项目初始化
npm init

# 安装需要的依赖
yarn add rollup typescript rollup-plugin-postcss rollup-plugin-typescript tslib -D
 复制代码

rollup-plugin-typescript 插件依赖 tslib,需要提前安装好，不然运行的时候会出现找不到 tslib依赖的错误。

配置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/**/*"  ] } 复制代码

安装scss相关插件

# 安装scss相关插件
yarn add rollup-plugin-postcss node-sass postcss-cssnext cssnano -D
复制代码

rollup-plugin-postcss ——插件允许在js中引入css并且生成对于的css文件。

⚠️v2版本 extract对应的是文件路径
⚠️v3版本 extract对应的是绝对路径

node-sass处理scss文件
postcss-cssnext 代码转换为可以在不支持这些语法的旧浏览器上使用 (如浏览器前缀)
cssnano 这个插件可以将输出的CSS压缩和简化。你可以将这个类比为JavaScript的 UglifyJS

安装模版转换插件

yarn add rollup-plugin-generate-html-template -D
复制代码

rollup-plugin-generate-html-template 动态插入js到html中，通过replaceVars参数也可以替换html中的变量

安装本地服务和热更新插件

yarn add rollup-plugin-serve rollup-plugin-livereload -D
复制代码

rollup-plugin-serve 本地服务
rollup-plugin-livereload 热更新插件

安装环境变量插件

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"  }, 复制代码

cross-env 设置环境变量根据不同的环境加载不同的插件

最终rollup.config.js如下

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`) // 输出路径  }),  typescript(),  babel({  exclude: 'node_modules/**'  }),  template({  template: './index.html',  target: './dist/index.html',  replaceVars: {  '__STYLE_URL__': `${name}.css`  }  }),  ...Plugins,  ] }  复制代码