vivo-ui/rollup.build.js

vivo ui component lib for vue

const promisify = require('util').promisify
const rollup = require('rollup')
const resolve = require('rollup-plugin-node-resolve')
const commonjs = require('rollup-plugin-commonjs')
const postcss = require('rollup-plugin-postcss')
const post = require('postcss')
const url = require('rollup-plugin-url')
const babel = require('rollup-plugin-babel')
const uglify = require('rollup-plugin-uglify')
const vue = require('rollup-plugin-vue')
const autoprefixer = require('autoprefixer')
const modernizr = require('modernizr')
const path = require('path')
const fs = require('fs')
const fse = require('fs-extra')
const file = 'src/vendor/modernizr/modernizr.js'
let k = 0

//文件写入
function writeFile (file, data) {
  const sep = path.sep
  const folders = path.dirname(file).split(sep)
  let p = ''
  while (folders.length) {
    p += folders.shift() + sep
    if (!fs.existsSync(p)) {
      fs.mkdirSync(p)
    }
  }
  fs.writeFileSync(file, data, 'utf8')
}

//创建临时的自定义modernizr文件
modernizr.build({
  // minify: true,
  options: [
    'prefixed'
  ]
}, function (result) {
  writeFile(file, result)
})

function build (format, minify) {
  k++
  rollup.rollup({
    input: 'src/index.js',
    plugins: [
      resolve(),
      commonjs(),
      postcss({}),
      url({
        limit: 100 * 1024
      }),
      vue({
        css: true,
        cssModules: {
          generateScopedName: '[path][name]--[local]--[hash:base64:5]'
        },
        // css(content, styles) {
        //     styles.forEach(({id, code}) => {
        //         console.log(id, '----------', code);
        //
        //         // const filename = id.replace(/^.*\/([^\/]*)\/[^\/]*$/, '$1');
        //         //
        //         // fs.writeFileSync(`dist/css/${filename}.js`, function () {
        //         //     return `export default function() {
        //         //             styleInject('${code.replace(/\s+/gm, ' ').replace(/'/g, '\\\'')}');
        //         //         };`;
        //         // }());
        //     });
        // },
        postcss: [autoprefixer(require('./postcss.config').plugins.autoprefixer)]
      }),
      babel({
        runtimeHelpers: true,
        include: 'src/**'   // 只编译我们的源代码
      })
    ].concat(minify ? uglify() : [])
  }).then(function (bundle) {
    bundle.write(Object.assign({
      file: `dist/lib${format === 'es' ? '.esm' : ''}${minify ? '.min' : ''}.js`,
      format: format
    }, format === 'es' ? {} : {
      name: 'VUI'
    })).then(function () {
      //所有任务执行完后删除临时文件
      // !(--k) && fs.unlinkSync(file);
    })
  })
}

// build('es');
build('umd');
// build('es', true);
// build('umd', true);

//生成lib目录内容
(function () {
  const suffix = String(Date.now()).substring(0, 4)
  const src = path.join(__dirname, 'src')

  /**
   * @param file  文件路径
   * @param isVue   是否是vue文件
   */
  function handle (file, isVue) {
    //获取file相对src的路径
    const relative = path.relative(src, path.join(path.dirname(file), path.basename(file, isVue ? '.vue' : '.js')))

    if (relative.startsWith('vendor/')) { // 如果是vendor
      fse.copy(file, path.join(__dirname, 'lib', relative + '.js'))

      return
    }

    //构建
    rollup.rollup({
      input: file/*temp*/,
      plugins: [
        url({
          limit: 100 * 1024
        }),
        vue({
          css: true,
          cssModules: {
            generateScopedName: '[path][name]--[local]--[hash:base64:5]'
          },
          postcss: [autoprefixer(require('./postcss.config').plugins.autoprefixer)]
        }),
        babel({
          runtimeHelpers: true,
          include: 'src/**'   // 只编译我们的源代码
        })
      ],
      external(id) {  //不处理部分import
        return id !== file && !/\.(jpg|jpeg|png|gif|svg)$/.test(id)
      }
    }).then(function (bundle) {
      //产出代码
      bundle.generate({
        format: 'es',
        paths(id) {     //将import中的.vue替换成.js
          if (/^\w/.test(id)) {   //npm库
            return id
          } else {
            id = id.replace(/\.vue$/, '')
            if (path.isAbsolute(id)) {   //绝对路径
              let relative = path.relative(path.dirname(file), id)

              return relative.startsWith('.') ? relative : './' + relative
            } else {  //相对路径
              return id.startsWith('.') ? id : './' + relative
            }
          }
        }
      }).then(function ({code}) {
        //将import添加到产出文件中
        const file = path.join(__dirname, 'lib', relative + '.js')

        writeFile(file, code)
      })
    })
  }

  //遍历目录
  async function readDir (dir) {
    fs.readdirSync(dir).forEach(async function (name) {
      const file = path.join(dir, name)
      const stats = await promisify(fs.stat)(file)

      if (stats.isDirectory()) {
        readDir(file)
      } else if (['.vue', '.js'].includes(path.extname(name))) {  //vue和js文件
        handle(file, name.endsWith('.vue'))
      } else if (name.endsWith('.css')) {     //css文件
        //将css添加前缀后复制到lib目录中
        const dest = path.join(__dirname, 'lib', path.relative(src, file))
        const css = await promisify(fs.readFile)(file, 'utf8')

        post([autoprefixer(require('./postcss.config').plugins.autoprefixer)]).process(css, {
          from: file,
          to: dest
        }).then(result => {
          writeFile(dest, result.css)
        })
      }
    })
  }

  readDir(src)
}())