当前位置：文江博客 Node Package Readme @absolunet/library-builder 中文文档教程

@absolunet/library-builder 中文文档教程

发布于 3年前浏览 21 项目主页更新于 3年前

@absolunet/library-builder

JS library builder via webpack

编写您的 JS 库并将其导出到 Node.js、浏览器或 kafe (ES5/ES6+) 通过 webpack 和 Babel

Install

$ npm install @absolunet/library-builder

Usage

强加一些约定以更好地工作

Project structure

index.js
webpack.config.js

dist/
    ↳ browser.js
    ↳ browser-es5.js
    ↳ kafe.js
    ↳ kafe-es5.js
    ↳ node.js

lib/

Each build will be outputted in a dist folder with a predefined name.
Main script would be under index.js with its subfiles under lib.

Code conventions

Internal dependencies (which will be outputted in the final built file) are dealt with the ES6 modules (import / export) syntax.
External dependencies (which will be referenced in the final built file) are dealt with the Node.js modules (require) syntax.
index.js should end with a default export statement representing the whole library.

Node.js build

External dependencies will be left untouched in the final built file thus making classic require() Node.js statements. (See webpack configuration)
Final usage will look like this

const mylibrary = require('@organisation/my-library');   // dist/node.js

Browser build

External dependencies will be transform to a variable assignation, assuming that the dependencies are already loaded elsewhere. (See webpack configuration)

const cl = require('cool-lib');
// Becomes
const cl = window.coolLib;

Final usage will look like this

console.log(window.mylibrary);   // dist/browser.js

The dist/browser.js is a pure ES6+ built and the dist/browser-es5.js is the same but with a Babel compilation to ES5 syntax.

kafe build

Is the same as the browser build but with the output scoped under window.kafe
Final usage will look like this

console.log(window.kafe.mylibrary);   // dist/kafe.js

The dist/kafe.js is a pure ES6+ built and the dist/kafe-es5.js is the same but with a Babel compilation to ES5 syntax.

webpack Configuration

你的 webpack.config.js 应该看起来像这样

const LibraryBuilder = require('@absolunet/library-builder');

const builder = new LibraryBuilder({
    name: 'mylibrary',
    root: __dirname
});


//-- Node.js
const nodeExternals = {
    externals: [
        'cool-lib',          // Dependencies to reference and not include
        'meaningful-helper'
    ]
};


//-- Browser
const browserExternals = {
    externals: {
        'cool-lib':           'window.coolLib',   // Dependencies to reference and their variable counterpart
        'meaningful-helper':  'window.mnfHelper'
    }
};


module.exports = [
    builder.config.mergeWithNode(nodeExternals),           // If you want a Node.js build
    builder.config.mergeWithBrowser(browserExternals),     // If you want a browser ES6+ build
    builder.config.mergeWithBrowserES5(browserExternals),  // If you want a browser ES5 build
    builder.config.mergeWithKafe(browserExternals),        // If you want a kafe ES6+ build
    builder.config.mergeWithKafeES5(browserExternals)      // If you want a kafe ES5 build
];

package.json

你的 package.json 应该包含这些条目

{
    "main": "dist/node.js",
    "browser": "dist/browser.js -OR- dist/kafe.js",
    "scripts": {
        "build": "node node_modules/@absolunet/library-builder/bin/build.js"
    },
    "devDependencies": {
        "@absolunet/library-builder": "1.1.0",
        "lodash.merge": "4.6.1"
    },
    "dependencies": {
        "cool-lib": "^1.2.3",
        "meaningful-helper": "^4.5.6"
    }
}

这种构建方式你只需要运行 npm 运行构建

API

constructor(options)

options.name

必需
类型：字符串
包名称（用于 kafe 构建）

options.root

必需
类型：字符串
根文件夹的路径（通常是__dirname）

API - Configuration

config.node

Node.js 导出的

基本 webpack 配置

config.browser

浏览器 ES6+ 导出的

基本 webpack 配置

config.browserES5

用于 ES6+的基本 webpack 配置浏览器 ES5 导出（通过 Babel）

config.kafe

kafe ES6+ 导出的

基本 webpack 配置