简单实现一个 js scroll 库

 1. Rollup 配置

1. 安装依赖

   npm install rollup -D
   npm install @rollup/plugin-commonjs -D
   npm install @rollup/plugin-node-resolve -D
   

2. 修改 package.json

   "main": "dist/iscroll-flywen.cjs.js",
   "module": "dist/iscroll-flywen.esm.js",
   "browser": "dist/iscroll-flywen.umd.js",
   "scripts": {  
     "dev": "rollup -c -w",  
     "build": "rollup -c",
     "test": "node test/test.js"
   },
   

3. 创建 rollup.config.js

   import resolve from "@rollup/plugin-node-resolve";
   import commonjs from "@rollup/plugin-commonjs";
   import pkg from "./package.json";
   export default [
     {    
       input: "src/index.js",
       output: {      
         file: pkg.browser,
         name: "iscrollFlywen",
         format: "umd"    
       },    
       plugins: [
         resolve(),
         commonjs()
       ]
     },
     {
       input: "src/index.js",
       output: [
         {
           file: pkg.main,
           format: "cjs"
         },
         {
           file: pkg.module,
           format: "es"
         }
       ]
     }
   ]
   

2. Eslint + Prettier 配置

1. 安装 prettier 依赖

   npm install prettier -D
   

2. 配置 prettier

   根目录创建 .prettierrc.json
   {  
     "endOfLine": "crlf"
   }
   

3. 安装 eslint-config-prettier，eslint-plugin-prettier 依赖

   npm install eslint-config-prettier -D
   npm install eslint-plugin-prettier -D
   

4. 安装 eslint 依赖

   npm install eslint -D
   

5. 配置 eslint

   npx eslint --init
   {
     plugins: ["prettier"],
     extends: [...,"prettier"],
     ignorePatterns: ["/dist/*.js"]
   }
   

6. 安装 lint-staged,husky 依赖

   npm install lint-staged husky -D
   npx husky add .husky/pre-commit "lint-staged"
   

7. 配置 pre-commit

   编辑 package.json
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
     }
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"
   },
   

3. Babel 配置

1. 下载 @rollup/plugin-babel @babel/core @babel/preset-env 依赖

   npm install @rollup/plugin-babel @babel/core @babel/preset-env -D
   

2. 配置 rollup.config.js

   plugins: [
     resolve(), 
     commonjs(),
     babel({ babelHelpers: "bundled" })
   ],
   

3. 配置 babel.config.js

   module.exports = {  
     presets: ["@babel/env"]
   };
   

4. Mocha 配置

1. 依赖下载

   npm install mocha --save-dev
   

2. 配置测试命令

   # 编辑 package.json
   {
     "scripts": {
       "test": "mocha"
     }
   }
   

3. 测试逻辑代码

   # 根目录创建 test 文件夹
   mkdir test
   
   # 创建 test/test.js 文件
   var assert = require("assert");
   const { describe, it } = require("mocha");
   describe("Array", function() {
     describe("#indexOf()", function() {
       it("should return -1 when the value is not present", function() {
         assert.equal([1, 2, 3].indexOf(4), -1);
       });
     });
   });
   

4. 测试

   npm test 
   

5. 支持 import

   根目录创建 .mocharc.js
   module.exports = {
     require: "@babel/register"
   } 
   

6. 添加 Babel配置 如上述步骤 3

7. 编写测试代码

   创建 test/test-import.js
   import { startsWith } from "../src/utils/strUtil";
   const { describe, it } = require("mocha");
   const assert = require("assert");
   describe(
     "Babel usage suite",
      () => {  
              it("should starts with me",
                () => {    let res = startsWith("meta", "me");
       assert.equal(res, true);
   });});
   

8. 测试

   npm run test
   

4. 代码实现

5. 发布测试

6. 参考

prettier.io/docs/en/int…