quick-libs v1.0.3

前言

基于 rollup 搭建一个库打包脚手架，来发布自己的库和组件。

使用

// 安装
npm install quick/libs
// 使用
import * as quick from 'quick/libs'

// 按需引入
import { json } from 'quick/libs'

rollup

rollup 入门

安装 rollup：

npm i rollup -g

//然后在本地创建一个项目：

mkdir -p my-project
cd my-project

rollup 的配置文件(rollup.config.js 在根目录下)：

// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  }
};

rollup 插件

比较实用的插件有：

• rollup-plugin-node-resolve ---帮助 Rollup 查找外部模块，然后导入
• rollup-plugin-commonjs ---将 CommonJS 模块转换为 ES2015 供 Rollup 处理
• rollup-plugin-babel --- 让我们可以使用 es6 新特性来编写代码
• rollup-plugin-terser --- 压缩 js 代码，包括 es6 代码压缩
• rollup-plugin-eslint --- js 代码检测

配置：

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import { eslint } from 'rollup-plugin-eslint';

export default [
  {
    input: 'src/main.js',
    output: {
      name: 'timeout',
      file: '/lib/tool.js',
      format: 'umd'
    },
    plugins: [
      resolve(), // 这样 Rollup 能找到 `ms`
      commonjs(), // 这样 Rollup 能转换 `ms` 为一个ES模块
      eslint(),
      babel(),
      terser()
    ]
  }
];

利用 babel 来编译 es6 代码

首先我们先安装 babel 相关模块：

npm i core-js @babel/core @babel/preset-env @babel/plugin-transform-runtime

然后设置.babelrc 文件

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "useBuiltIns": "usage",
        "corejs": "2.6.10",
        "targets": {
          "ie": 10
        }
      }
    ]
  ],
  "plugins": [
      // 解决多个地方使用相同代码导致打包重复的问题
      ["@babel/plugin-transform-runtime"]
  ],
  "ignore": [
      "node_modules/**"
    ]
}

@babel/preset-env 可以根据配置的目标浏览器或者运行环境来自动将 ES2015+的代码转换为 es5。需要注意的是，我们设置"modules": false，否则 Babel 会在 Rollup 有机会做处理之前，将我们的模块转成 CommonJS，导致 Rollup 的一些处理失败。

为了解决多个地方使用相同代码导致打包重复的问题，我们需要在.babelrc 的 plugins 里配置@babel/plugin-transform-runtime，同时我们需要修改 rollup 的配置文件：

babel({
  exclude: 'node_modules/**', // 防止打包node_modules下的文件
  runtimeHelpers: true,       // 使plugin-transform-runtime生效
}),

区分测试环境和开发环境

我们可以在 package.json 中配置不同的执行脚本和环境变量来对开发和生产做不同的配置：

// package.json
"scripts": {
    "dev": "rollup -c -w --environment NODE_ENV:development",
    "build": "rollup -c --environment NODE_ENV:production",
    "test": "node test/test.js"
  },

手动导出 NODE_ENV 为 production 和 development 来区分生产和开发环境，然后在代码中通过 process.env.NODE_ENV 来获取参数。这里我们主要用来设置在开发环境下不压缩代码：

const isDev = process.env.NODE_ENV !== 'production';
// ...
plugins: [!isDev && terser()];

eslint 来做代码检测

使用 rollup-plugin-eslint 来配置：

eslint({
  throwOnError: true,
  throwOnWarning: true,
  include: ['src/**'],
  exclude: ['node_modules/**']
});

然后建立.eslintrc.js 来根据自己风格配置具体检测：

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true
  },
  extends: 'eslint:recommended',
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
    ENV: true
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  rules: {
    'linebreak-style': ['error', 'unix'],
    quotes: ['error', 'single']
  }
};

external 属性

使用 rollup 打包，我们在自己的库中需要使用第三方库，例如 lodash 等，又不想在最终生成的打包文件中出现 jquery。这个时候我们就需要使用 external 属性。比如我们使用了 lodash，

import _ from 'lodash'

// rollup.config.js
{
    input: 'src/main.js',
    external: ['lodash'],
    globals: {
        lodash: '_'
    },
    output: [
      { file: pkg.main, format: 'cjs' },{ file: pkg.module, format: 'es' }
    ]
}

打包输出

导出成 commonjs 模块，es 模块，以及浏览器能识别的模块，通过如下方式设置：

{
  input: 'src/main.js',
  external: ['ms'],
  output: [
	{ file: pkg.main, format: 'cjs' },
	{ file: pkg.module, format: 'es' },
	{ file: pkg.module, format: 'umd' }
  ]
}

发布到 npm

如下方式配置 npm 账号，然后发布

#注册
npm adduser
#登陆
npm login
 #发布
npm publish

name 是包的名字，可以直接写包名，比如 loadash，或者添加域，类似于@koa/router 这种，@后面是你 npm 注册的用户名。key 为包的关键字。