jpacker

JS代码打包工具

本项目更多的用于浏览器端 JS 代码的打包。需要注意的是，本项目不支持 es6 语法。

当你启动该项目后，打包者将监听你的源码文件夹，你可以通过保存该文件夹下的任意文件，向打包者发出打包指令。

打包者将你在源码文件夹下的文件，进行拼接，并使用预配置好的插件列表，对你的代码进行编译处理，最终以单文件的形式输出在 dist 文件夹中。

安装

npm install jpacker

启动打包者

node build/build

自带插件

• base
• import
• define
• less

base

base 插件用于将你的代码打包成工厂模式：

// 源码
console.info(1 + 1);

// 打包后
'use strict';
(function (global, factory) {

  var exports = function (name, value) {
    global[name] = value;
  };

  if (typeof module === 'object' && typeof module.exports === 'object') {
    module.exports = factory(exports);
  } else if(typeof define === 'function') {
    define(factory.bind(global, exports));
  } else {
    factory(exports);
  }
})(this, function (exports) {

  // 你的代码都被放置在这里
  console.info(1 + 1);
});

你可以在源码中，使用 exports() 向全局变量暴露你的接口。

import

拼接一个外部文件，语法：

import sum from "yourfilePath";

注意，这里的 import 并不是 es6 中的 import ，它是本插件提供的另一种语法，用于拼接一个外部的js文件。

// 外部文件 sum.js
function sum (a, b) {
  return a + b;
}

exports(sum);

// 源码
import sum from "sum";

// 打包后：
var sum_12345678 = (function () {

  var sum_12345678 = {};
  var exports = function (name, value) {
    if (value) {
      ${name}[name] = value;
    } else {
      ${name} = name;
    }
  };

  // 外部文件的代码在这
  function sum (a, b) {
    return a + b;
  }

  exports(sum);

  return sum_12345678;
})();

var sum = sum_12345678;

define

define 插件向你提供一个方法 require 用于加载远程 js 资源。

require([
  'js/jquery'
], function () {
  
  console.info(typeof $);
});

你可以直接在源码中使用该函数。

less

less 插件向你提供一个方法 less ，你可以使用该函数编写 less 代码，less插件会帮你将这些代码编译成 css 并插入到 html 中。

less(`
@width: 100px;

.main {
  width: @width;
}
`);

你可以直接在源码中使用该函数。

---

除此以外，你还可以根据你的需要自由扩展插件。