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,
  ]
}

以上基本完成项目配置，然后执行yarn serve就可以愉快的进行开发了。

仓库地址：传送门

本文使用 mdnice 排版