100行代码实现一个乞丐版webpack

Hello各位靓仔大家好呀！在我一次一次拖延症之后这篇文章终于问世了；首先祝大家新年好吧（敷衍）~

今天来讲讲webpack的打包原理，以及简单实现吧~

相信大家对webpack多多少少都有理解，说到webpack是什么基本上都能说出这是一个模块化打包工具，今天我就从模块化与打包入手来简单讲解一下

模块化与webpack

说到Webpack总绕不开模块化，我们来看看模块化的发展进程与Webpack在其中起到的作用；早期由于没有规范的约束，模块化方案也是层出不穷，最初的模块化方案是最原始简单的文件划分方案；每个文件代表一个单独模块，然后在页面中通过script标签引用，由于代码是在同一个作用域中执行的短期内确实没有什么影响，但是随着项目体量的增大随之而来的是各种命名冲突，作用域污染，变量提升等一系列棘手的问题；当时最明显的莫过于命名冲突问题；为了解决命名冲突问题，优秀的前端切图仔先辈们在文件划分的基础之上整出了一个命名空间模块化划分方案，顾名思义就是为每一个模块提供独立的命名空间并挂载到Window上，通过Window.moduleXXX的方式去调用模块内的属性，这确实解决了命名冲突的问题；但是作用域污染的问题依旧存在，那怎么办？当然是给模块提供单独的作用域咯！当时最普遍的是IIFE模块化划分方案,在命名空间划分方案的基础之上为模块提供一个私有作用域；这个私有作用域是通过调用一个立即执行函数通过闭包的形式将模块挂载到window之上至此也就解决了作用域污染问题；人么吃饱了饭没事干总喜欢打老婆(bushi),没事总喜欢瞎折腾，虽然IIFE已经完美解决了作用域污染与变量命名冲突的问题但是切图仔们并不满足，他们觉得IIFE这种方式并不够快，当项目体量变得十分巨大的时候很容易造成卡顿(页面引入的模块并不会消除，每次加载都会将所有模块加载)；这时官方出手了，官方并没有惩治这群不知足的切图仔，相反还助他们一臂之力，随之而来的推出了一套AMD规范(异步模块加载规范) 由于cjs并不能很好的适用于浏览器，但是前端代码却是要在浏览器中执行的，因此诞生了大名鼎鼎的require.js,原理即是在需要引入模块时创建一个script标签挂载到页面中来做到异步加载；随着前端的发展，切图仔的欲望又得不到满足；在使用require.js发展的期间为了能兼容cjs也诞生过例如CMD规范但是终究是昙花一现；再往后随着模块化标准的增多，与依赖的不统一切图仔们发现急需一套新标准来规范模块化，为了兼容AMD，cjs与全局变量于是便诞生了UMD，随着ES标准的不断完善ES Modules诞生了，这便是我们现在常用的import导入的模块化方式；

讲了这么多模块化知识那么跟webpack有个鸡毛关系？随着前端模块的与项目资源的不断增多，对模块的管理熬掉了不少切图仔乌黑亮丽的秀发；秃头的切图仔们急需一个模块化管理工具来管理高效项目中的每一个文件与资源；于是诞生了webpack rollup gulp等等一系列工具

webpack解决了什么问题？

打开webpack官网映入眼帘的就是这张图片

100行代码实现一个乞丐版webpack_第1张图片

由这张图中我们可以看到webpack将一堆零散的文件打包编译成为js css 以及图片；这么做有什么用？又解决了什么问题呢？

我总结出了以下三点：

模块整合能力

随着项目体量的增大，模块文件增多使切图仔们处理模块文件变得异常艰辛，而模块资源又在浏览器当中运行，频繁的请求零散文件势必会对服务器造成负荷与应用的工作效率；而webpack可以将多个模块文件打包成一个文件，在减少资源内存的同时也减少了对服务器的请求

100行代码实现一个乞丐版webpack_第2张图片

代码编译能力

随着ES规范的快速发展，很多浏览器并不能及时兼容新的语法与API;这导致API的兼容变成一个较大的问题，而webpack则可以将这些浏览器看不懂的API与语法转换成浏览器看得懂的ES5语法；

100行代码实现一个乞丐版webpack_第3张图片

多种类模块资源管理

随着前端的发展模块种类增多（css，html，js，图片），而前端需要通过代码或者工具对模块资源进行管理整合；

100行代码实现一个乞丐版webpack_第4张图片

创建你的第一个Webpack项目

相信在日常工作中大家对React与Vue脚手架的使用已经非常的熟练，但是不知道大家在日常工作中是否用webpack从0到1创建过一个完整的项目，接下来我将用一个简单的webpack项目入手为大家分析讲解webpack的目录结构与打包原理；

初始化项目

#初始化项目
npm init 
#为项目添加依赖
yarn add webpack

项目目录结构

├── node_modules
├── package-lock.json
└── package.json

在目录下为项目添加webpack文件，webpack配置文件以及源码目录(src)

webpack.js

const { webpack } = require("webpack");
const webpackOptions = require("./webpack.config.js");
const compiler = webpack(webpackOptions);

//开始编译
compiler.run();

webpack.config.js

const path = require("path");

module.exports = {
    mode: "development", 
    entry: "./src/index.js", //入口文件
    output: {
        path: path.resolve(__dirname, "dist"),//输出路径
        filename: "[name].js",
    },
    devtool: "source-map", 
};

为源码项目(src)添加文件

name.js

export  default  '龙骑士尹道长'

info.js

import name from './name.js'
export default `${name} 666`

index.js（入口文件）

import info from "./info.js"
console.log(info)

至此一个简单的webpack项目就构建完成啦，现在我们只需要运行webpack.js(运行nodejs方式)便可对项目进行打包

打包后，你的项目目录中就会出现一个dist文件夹文件夹中有一个main.js(以下内容较长，经删减整理以及添加备注，源码未动)

(() => {
    "use strict";
    var __webpack_modules__ = ({
        //info.js
        "./src/info.js":
            ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

                __webpack_require__.r (__webpack_exports__);
                __webpack_require__.d (__webpack_exports__, {
                    "default": () => (__WEBPACK_DEFAULT_EXPORT__)
                });
                var _name_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__ (/*! ./name.js */ "./src/name.js");

                const __WEBPACK_DEFAULT_EXPORT__ = (`${_name_js__WEBPACK_IMPORTED_MODULE_0__["default"]} 666`);
            }),
        //name.js
        "./src/name.js":
            ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
                __webpack_require__.r (__webpack_exports__);
                __webpack_require__.d (__webpack_exports__, {
                    "default": () => (__WEBPACK_DEFAULT_EXPORT__)
                });
                const __WEBPACK_DEFAULT_EXPORT__ = ('龙骑士尹道长');
            })

    });

    var __webpack_module_cache__ = {};
    function __webpack_require__ (moduleId) {
        var cachedModule = __webpack_module_cache__[moduleId];
        if (cachedModule !== undefined) {
            return cachedModule.exports;
        }
        var module = __webpack_module_cache__[moduleId] = {
            exports: {}
        };
        __webpack_modules__[moduleId] (module, module.exports, __webpack_require__);
        return module.exports;
    }
    (() => {
        __webpack_require__.d = (exports, definition) => {
            for (var key in definition) {
                if (__webpack_require__.o (definition, key) && !__webpack_require__.o (exports, key)) {
                    Object.defineProperty (exports, key, {enumerable: true, get: definition[key]});
                }
            }
        };
    }) ();
    (() => {
        __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call (obj, prop))
    }) ();
    (() => {
        __webpack_require__.r = (exports) => {
            if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
                Object.defineProperty (exports, Symbol.toStringTag, {value: 'Module'});
            }
            Object.defineProperty (exports, '__esModule', {value: true});
        };
    }) ();
    var __webpack_exports__ = {};
    //入口文件
    (() => {
        /*!**********************!*\
          !*** ./src/index.js ***!
          **********************/
        __webpack_require__.r (__webpack_exports__);
        var _info_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__ (/*! ./info.js */ "./src/info.js");
        console.log (_info_js__WEBPACK_IMPORTED_MODULE_0__["default"])
    }) ();

}) ()
;

可以看到打包后的文件是一整个IIFE（立即执行函数），并将info.js与name.js以路径名为key，value为箭头函数的形式保存在webpack_modules 当中，并在入口文件(对应index.js)的立即执行函数中进行调用；可能现在我们对这段进行过打包编译的代码有很多疑问，比如这打包后的代码阅读起来好麻烦，究竟做了个啥？为何要采取这种形式对源码进行打包？我书写的明明是ES6代码，为何会转译成ES5代码？ES6代码是如何转译成ES5代码的？等等问题；俗话说工欲善其事必先利其器，我们只有对这些问题有所深入才能了解webpack的打包原理，当然也是为了对我们接下来实现简易版webpack做铺垫；

编译后源码解读

相信很多靓仔到这里还是一脸懵，这打包出来的文件究竟是个啥，里面形形色色的方法究竟何用？接下来我会一一解读；

关于IIFE的解读

在整个打包后的源码当中我们可以看到很多

(x，...)=>{
    ...省略
}()；

类似的方法，这类书写方式在我们平时工作中并不常见，其实这类方法统称为IIFE 立即执行函数表达式，全称为Immediately-invoked function expression， 由于在ES5当中没有明显的的块级作用域规范，为了防止模块与模块之间出现变量污染，所以采取这种方式来规范作用域；从代码本身只需将它理解为定义一个方法，并立即执行即可；

编译文件的entry入口

在webpack.config.js中我们规定的入口文件是index.js 那么在编译后的代码当中入口又是什么呢？答案是

(() => {
    /*!**********************!*\
      !*** ./src/index.js ***!
      **********************/
    __webpack_require__.r (__webpack_exports__);//定义当前模块为ES模块
    //获取当前文件中的依赖模块数据，在index.js中的依赖模块为info.js
    var _info_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__ (/*! ./info.js */ "./src/info.js");
    //输出
    console.log (_info_js__WEBPACK_IMPORTED_MODULE_0__["default"])
}) ();

对应index.js

import info from "./info.js" 
console.log(info)

模块获取方法： webpack_require

function __webpack_require__ (moduleId) {
    //moduleId为当前模块文件对应的路径名
    //获取当前模块缓存
    var cachedModule = __webpack_module_cache__[moduleId];
    //判断当前模块是否有缓存，若有则返回缓存
    if (cachedModule !== undefined) {
        return cachedModule.exports;
    }
    //若当前模块没有缓存，则在缓存变量中存入空export对象，方便向下获取调用
    var module = __webpack_module_cache__[moduleId] = {
        exports: {}
    };
    //由于模块文件是以方法的形式保存在__webpack_modules__当中，
    //在调用模块文件的同时会将模块文件数据在__webpack_module_cache__
    //中进行缓存，并以闭包的方式赋值给module.export最终在__webpack_require__中返回
    __webpack_modules__[moduleId] (module, module.exports, __webpack_require__);
    return module.exports;
}

由于CommonJS在浏览器中无法运行，因此在编译之后会以__webpack_require__这种形式进行模块获取，如果你是一个足够细心的靓仔，你就会发现__webpack_require__并没有像其他方法一样有一个单独的立即执行函数包裹,
因为需要其访问__webpack_module_cache__与__webpack_modules__

模块缓存__webpack_module_cache__与模块__webpack_modules__

首先我们来看看模块缓存__webpack_module_cache__

var __webpack_module_cache__ = {};

为了提高执行效率我们在调用模块的同时会对当前调用的模块进行判断是否进行过调用，若没有调用过当前模块则会在 __webpack_module_cache__当中进行保存，并以模块路径名作为key进行保存，若调用过则返回缓存内容，来达到优化；

然后我们来看看我们的模块__webpack_modules__

var __webpack_modules__ = ({
    "./src/info.js":
        ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
            //定义当前模块为es模块
            __webpack_require__.r (__webpack_exports__);
            //提供当前模块的getter
            __webpack_require__.d (__webpack_exports__, {
                "default": () => (__WEBPACK_DEFAULT_EXPORT__)
            });
            //获取name模块数据
            var _name_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__ (/*! ./name.js */ "./src/name.js");
            //定义当前模块数据
            const __WEBPACK_DEFAULT_EXPORT__ = (`${_name_js__WEBPACK_IMPORTED_MODULE_0__["default"]} 666`);
        }),
    "./src/name.js":
        ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
            __webpack_require__.r (__webpack_exports__);
            __webpack_require__.d (__webpack_exports__, {
                "default": () => (__WEBPACK_DEFAULT_EXPORT__)
            });
            const __WEBPACK_DEFAULT_EXPORT__ = ('龙骑士尹道长');
        })
});

这里其实很好理解，每个模块都以路径名为key，方法为value的形式保存在__webpack_modules__当中，调用的同时会将当前模块保存在__webpack_module_cache__ 当中方便下次调用模块

关于__webpack_require__.xxx

在编译后的代码中我们还可以看到__webpack_require__.r，__webpack_require__.d，__webpack_require__.o这三个方法，那这三个方法是做什么用的呢

__webpack_require__.r

(() => {
    __webpack_require__.r = (exports) => {
        if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
            Object.defineProperty (exports, Symbol.toStringTag, {value: 'Module'});
        }
        Object.defineProperty (exports, '__esModule', {value: true});
    };
}) ();

该方法其实主要是为了给当前模块打上一个es模块标签

__webpack_require__.d

(() => {
    __webpack_require__.d = (exports, definition) => {
        for (var key in definition) {
            if (__webpack_require__.o (definition, key) && !__webpack_require__.o (exports, key)) {
                Object.defineProperty (exports, key, {enumerable: true, get: definition[key]});
            }
        }
    };
}) ();

__webpack_require__.d则是为了提供当前模块的getter

__webpack_require__.o

(() => {
    __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call (obj, prop))
}) ();

判断该属性是否继承自该对象

源码中的ES6代码是如何转译成ES5的与打包文件的构建过程

在大致了解打包后的代码运行逻辑之后，你是否发现我们在源码当中使用的es6代码也一并转换成了es5，由于并不是所有的浏览器都能识别es6代码，或者说浏览器不是运行所有的es6代码，因此在这里会做转换；那么究竟在webpack当中我们的es6代码是如何转换成es5代码的呢？

webpack会将我们模块的es6语法转换成AST对象，然后分析出当前模块所需的依赖，并将AST对象转换成es5代码，依次循环分析，最终会构建成graph（文件依赖图），在最后会生成bundle.js也就是我们的打包文件，这便是webpack打包构建的全过程；

100行代码实现一个乞丐版webpack_第5张图片

那么在这里可能就会有靓仔要问了，啥是AST？我们接着往下看

webpack构建基石：AST

AST又称为抽象语法树（Abstract Syntax Tree）,是我们构建的代码的一种抽象表示，它以树状形式表现编程语言的语法结构；

在这里我们需要用到一个AST转换工具
https://astexplorer.net/

以以下代码为例

class Dog{
  constructor(){
    this.name = '旺财'
    this.sex = 'man'
  }
  lick(){
    console.log('我是旺财，我是条老舔狗')
  }
}

在经过工具转换成AST语法树之后，可以看到源代码在AST语法树中都可以找到对应关系

100行代码实现一个乞丐版webpack_第6张图片

AST对象如何转换成代码

获得AST对象之后要怎么转换成代码呢？

由于不同语言对应的AST对象结构不尽相同，举个例子，如果我们现在手头上有一段JS代码要将它转换成Java代码，我们就需要将这段JS代码先转换成JS对应的AST对象，然后对这段JS对应的AST对象进行转换，转换成Java代码对应的AST对象，最后再根据新的Java对应的AST对象转换成JAVA代码；整个过程主要经历了解析，转换，代码生成三个步骤；

100行代码实现一个乞丐版webpack_第7张图片

在了解AST转换流程与webpack构建流程之后我们就可以开始尝试构建一个简易版的webpack打包流程了；

手写webpack

相信现在大家已经对webpack打包流程已经有了一定了解，那么我们就用最简单的思路来实现一个乞丐版webpack，在此我再放一遍流程图方便大家书写代码

100行代码实现一个乞丐版webpack_第8张图片

为了方便大家理解，我觉得有必要先带大家了解几个babel的作用；

准备工作:依赖babel

@babel/parser

把源代码字符串转成抽象语法树(AST)，在解析过程中主要是两个阶段：词法分析和*语法分析

@babel/traverse

遍历抽象语法树(AST),并调用Babel配置文件中的插件,对抽象语法树(AST)进行增删改，在文中主要用于文件依赖分析

@babel/core

是 babel的核心，主要作用就是根据我们的配置文件转换代码，配置文件一般是.babelrc(静态文件)或 babel.config.js(可编程)，主要作用如下：

  • 加载和处理配置(config)
  • 加载插件
  • 调用 Parser 进行语法解析，生成 AST
  • 调用 Traverser 遍历AST，并使用访问者模式应用'插件'对 AST 进行转换
  • 生成代码，包括SourceMap转换和源代码生成

文中主要用于将AST转换为代码字符串

读取文件

我们可以在当前webpack下随意搭建一个js，完成以下操作

const fs = require ('fs')
const {entry, output} = require ("./webpack.config")//webpack配置项
function createAssets(filename){
    //读取文件内容
    const content = fs.readFileSync (filename, "utf-8")
    console.log(content)//熟悉nodejs的靓仔应该都能理解，这一步会答应文件内容
}
createAssets(entry)

文件内容转换成AST抽象语法树

const fs = require ('fs')
+const parser = require ('@babel/parser')
const {entry, output} = require ("./webpack.config")//webpack配置项
function createAssets(filename){
    //读取文件内容
    const content = fs.readFileSync (filename, "utf-8")
    //转化成AST对象
+   const ast = parser.parse (content, {
+       sourceType: 'module'//输出内容为模块，还可以选择为script，但是由于我们是使用模块化操作所以不采用script
+   })
+   console.log(ast)
}
createAssets(entry)

分析当前文件依赖

const fs = require ('fs')
const parser = require ('@babel/parser')
+ const traverse = require ('@babel/traverse').default
const {entry, output} = require ("./webpack.config")//webpack配置项
+ const path = require ("path")
+ let relativeFilenames = {}
function createAssets(filename){
    //读取文件内容
    const content = fs.readFileSync (filename, "utf-8")
    //转化成AST对象
    const ast = parser.parse (content, {
        sourceType: 'module'//输出内容为模块，还可以选择为script，但是由于我们是使用模块化操作所以不采用script
    })

    let dependencies = []
    //分析当前文件依赖
+    traverse (ast, {
+        ImportDeclaration ({node}) {
+            //将当前依赖推入数组，方便后面构建graph
+            dependencies.push (node.source.value)


+            if (!relativeFilenames[node.source.value]) {
+                const dirname = path.dirname (filename)
+                relativeFilenames[node.source.value] = path.join (dirname, node.source.value).replace(/\/g,'/')
+            }
+        }
+    })


    console.log(relativeFilenames)
}
createAssets(entry)

将AST转换为ES5代码

const fs = require ('fs')
const parser = require ('@babel/parser')
const traverse = require ('@babel/traverse').default
+ const babel = require ('@babel/core')
const {entry, output} = require ("./webpack.config")//webpack配置项
let relativeFilenames = {}
function createAssets(filename){
    //读取文件内容
    const content = fs.readFileSync (filename, "utf-8")
    //转化成AST对象
    const ast = parser.parse (content, {
        sourceType: 'module'//输出内容为模块，还可以选择为script，但是由于我们是使用模块化操作所以不采用script
    })

    let dependencies = []
    //分析当前文件依赖
    traverse (ast, {
        ImportDeclaration ({node}) {
            //将当前依赖推入数组，方便后面构建graph
            dependencies.push (node.source.value)
            if (!relativeFilenames[node.source.value]) {
                const dirname = path.dirname (filename)
                relativeFilenames[node.source.value] = path.join (dirname, node.source.value).replace(/\/g,'/')
            }
        }
    })
    //转换成ES5代码
+    const {code} = babel.transformFromAstSync (ast, null, {
+        presets: ['@babel/preset-env'],
+    })

    console.log(code)
}
createAssets(entry)

此时我们运行代码已经可以看到打包之后的入口文件 index.js了

100行代码实现一个乞丐版webpack_第9张图片

循环分析，构建模块对照对象

const fs = require ('fs')
const parser = require ('@babel/parser')
const traverse = require ('@babel/traverse').default
const babel = require ('@babel/core')
const path = require ("path")
const {entry, output} = require ("./webpack.config")//webpack配置项
let relativeFilenames = {}
+ let webpackModules = {}//用于存储模块信息
function createAssets(filename){
    //读取文件内容
    const content = fs.readFileSync (filename, "utf-8")
    //转化成AST对象
    const ast = parser.parse (content, {
        sourceType: 'module'//输出内容为模块，还可以选择为script，但是由于我们是使用模块化操作所以不采用script
    })

    let dependencies = []
    //分析当前文件依赖
    traverse (ast, {
        ImportDeclaration ({node}) {
            //将当前依赖推入数组，方便后面构建graph
            dependencies.push (node.source.value)
            if (!relativeFilenames[node.source.value]) {
                const dirname = path.dirname (filename)
                relativeFilenames[node.source.value] = path.join (dirname, node.source.value).replace(/\/g,'/')
            }
        }
    })
    //转换成ES5代码
    const {code} = babel.transformFromAstSync (ast, null, {
        presets: ['@babel/preset-env'],
    })
    //判断模块是否被转换，若模块不存在则代表还未被转换
    if (!webpackModules[filename]) {
        const dirname = path.dirname (filename)
        dependencies.forEach (item => {
            //这里需要注意，由于我们的模块key为绝对路径，而用babel获得的是相对路径，因此需要将相对路径转换为绝对路径
            const absolutePath = path.join (dirname, item)
            createAssets (absolutePath)
        })
        //对模块信息进行赋值
        webpackModules[filename] = {
            dependencies,
            code,
        }
    }
}
createAssets(entry)

构建输出代码

此时我们已经获取了所有模块对象与模块对应的依赖，以及模块相对路径与绝对路径的对照，现在我们需要构建输出代码

const fs = require ('fs')
const parser = require ('@babel/parser')
const traverse = require ('@babel/traverse').default
const babel = require ('@babel/core')
const path = require ("path")
const {entry, output} = require ("./webpack.config")//webpack配置项
let relativeFilenames = {}
let webpackModules = {}
function createAssets(filename){
    //读取文件内容
    const content = fs.readFileSync (filename, "utf-8")
    //转化成AST对象
    const ast = parser.parse (content, {
        sourceType: 'module'//输出内容为模块，还可以选择为script，但是由于我们是使用模块化操作所以不采用script
    })

    let dependencies = []
    //分析当前文件依赖
    traverse (ast, {
        ImportDeclaration ({node}) {
            //将当前依赖推入数组，方便后面构建graph
            dependencies.push (node.source.value)
            if (!relativeFilenames[node.source.value]) {
                const dirname = path.dirname (filename)
                relativeFilenames[node.source.value] = path.join (dirname, node.source.value).replace(/\/g,'/')
            }
        }
    })
    //转换成ES5代码
    const {code} = babel.transformFromAstSync (ast, null, {
        presets: ['@babel/preset-env'],
    })

    if (!webpackModules[filename]) {
        const dirname = path.dirname (filename)
        dependencies.forEach (item => {
            const absolutePath = path.join (dirname, item)
            createAssets (absolutePath)
        })
        webpackModules[filename] = {
            dependencies,
            code,
        }
    }
}

createAssets(entry)

+function createOutputCode () {
+    let codeStr = ''
+    //循环模块对象构建输出模块代码对象字符串
+    for (let key in webpackModules) {
+        codeStr += `"${key.replace(/\/g,'/')}":(module, exports, require)=>{
+            ${webpackModules[key].code}
+        },`
+    }

+    const outputCode = `
+        (()=>{
+    const pathReference = ${JSON.stringify(relativeFilenames)}
+    const modules = {${codeStr}}
+    const __webpack_module_cache__ = {}
+    function require(moduleId){
+        var cachedModule = __webpack_module_cache__[moduleId];
+        if (cachedModule !== undefined) {
+            return cachedModule.exports;
+        }
+        var module = __webpack_module_cache__[moduleId] = {
+            exports: {}
+        };
+        //这不非常重点，之前提过由于模块内部用的是相对路径，所以在这里我们需要使用相对路径对应的绝对路径
+        function requireFn(path){
+            return require(pathReference[path])
+        }
+        modules[moduleId] (module, module.exports, requireFn);
+        return module.exports;
+    }
+    require('${entry}')
+})();
    `
+    console.log(outputCode)
+}

+ createOutputCode()

此时我们再运行代码就可以获取我们要输出的代码了

100行代码实现一个乞丐版webpack_第10张图片

创建输出文件

const fs = require ('fs')
const parser = require ('@babel/parser')
const traverse = require ('@babel/traverse').default
const babel = require ('@babel/core')
const path = require ("path")
const {entry, output} = require ("./webpack.config")//webpack配置项
let relativeFilenames = {}
let webpackModules = {}
function createAssets(filename){
    //读取文件内容
    const content = fs.readFileSync (filename, "utf-8")
    //转化成AST对象
    const ast = parser.parse (content, {
        sourceType: 'module'//输出内容为模块，还可以选择为script，但是由于我们是使用模块化操作所以不采用script
    })

    let dependencies = []
    //分析当前文件依赖
    traverse (ast, {
        ImportDeclaration ({node}) {
            //将当前依赖推入数组，方便后面构建graph
            dependencies.push (node.source.value)
            if (!relativeFilenames[node.source.value]) {
                const dirname = path.dirname (filename)
                relativeFilenames[node.source.value] = path.join (dirname, node.source.value).replace(/\/g,'/')
            }
        }
    })
    //转换成ES5代码
    const {code} = babel.transformFromAstSync (ast, null, {
        presets: ['@babel/preset-env'],
    })

    if (!webpackModules[filename]) {
        const dirname = path.dirname (filename)
        dependencies.forEach (item => {
            const absolutePath = path.join (dirname, item)
            createAssets (absolutePath)
        })
        webpackModules[filename] = {
            dependencies,
            code,
        }
    }
}

createAssets(entry)

function createOutputCode () {
    let codeStr = ''
    //循环模块对象构建输出模块代码对象字符串
    for (let key in webpackModules) {
        codeStr += `"${key.replace(/\/g,'/')}":(module, exports, require)=>{
            ${webpackModules[key].code}
        },`
    }

    const outputCode = `
        (()=>{
    const pathReference = ${JSON.stringify(relativeFilenames)}
    const modules = {${codeStr}}
    const __webpack_module_cache__ = {}
    function require(moduleId){
        var cachedModule = __webpack_module_cache__[moduleId];
        if (cachedModule !== undefined) {
            return cachedModule.exports;
        }
        var module = __webpack_module_cache__[moduleId] = {
            exports: {}
        };
        function requireFn(path){
            return require(pathReference[path])
        }
        modules[moduleId] (module, module.exports, requireFn);
        return module.exports;
    }
    require('${entry}')
})();
    `
+    createOutputFile(outputCode)
}

createOutputCode()

+ function createOutputFile(code){
+    //创建输出js
+    function createAction(){
+        fs.writeFile(`${output.path}/main.js`,code,()=>{})
+    }
+    //判断文件夹是否存在
+    if (!fs.existsSync(output.path)) {
+        //创建输出文件夹
+        fs.mkdir(output.path, (err) => {
+            createAction()
+        })
+    }else{
+        createAction()
+    }
}

再运行js你会发现你的项目目录中就有了打包后的dist文件夹

100行代码实现一个乞丐版webpack_第11张图片

至此我们的乞丐版webpack已经手写完成，运行dist文件夹下的main.js测试一下成果吧

100行代码实现一个乞丐版webpack_第12张图片

你可能感兴趣的:(100行代码实现一个乞丐版webpack)

  • 芦花鞋一四 许叶晗
    又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
  • 底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说 造命者说
    底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
  • 2020-01-25 晴岚85
    郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
  • 随笔 | 仙一般的灵气 海思沧海
    仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
  • 【iOS】MVC设计模式 Magnetic_h iosmvc设计模式objective-c学习ui
    MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
  • OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
    前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • 10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
    本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
  • C语言如何定义宏函数？ 小九格物 c语言
    在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
  • 理解Gunicorn：Python WSGI服务器的基石 范范0825 ipythonlinux运维
    理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
  • 小丽成长记（四十三） 玲玲54321
    小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习
  • 学点心理知识，呵护孩子健康 静候花开_7090
    昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
  • 瑶池防线 谜影梦蝶
    冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而
  • 《策划经理回忆录之二》 路基雅虎
    话说三年变六年，飘了，飘了……眨眼，2013年5月，老吴回到了他的家乡——油城从新开启他的工作幻想症生涯。很庆幸，这是一家很有追求，同时敢于尝试的，且实力不容低调的新星房企——金源置业(前身泰源置业)更值得庆幸的是第一个盘就是油城十路的标杆之一:金源盛世。2013年5月，到2015年11月，两年的陪伴，迎来了一场大爆发。2000个筹，5万/筹，直接回笼1个亿！！！这……让我开始认真审视这座看似五线
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 如何在 Fork 的 GitHub 项目中保留自己的修改并同步上游更新？github_fork_update iBaoxing github
    如何在Fork的GitHub项目中保留自己的修改并同步上游更新？在GitHub上Fork了一个项目后，你可能会对项目进行一些修改，同时原作者也在不断更新。如果想要在保留自己修改的基础上，同步原作者的最新更新，很多人会不知所措。本文将详细讲解如何在不丢失自己改动的情况下，将上游仓库的更新合并到自己的仓库中。问题描述假设你在GitHub上Fork了一个项目，并基于该项目做了一些修改，随后你发现原作者对
  • 扫地机类清洁产品之直流无刷电机控制 悟空胆好小 清洁服务机器人单片机人工智能
    扫地机类清洁产品之直流无刷电机控制1.1前言扫地机产品有很多的电机控制，滚刷电机1个，边刷电机1-2个，清水泵电机，风机一个，部分中高端产品支持抹布功能，也就是存在抹布盘电机，还有追觅科沃斯石头等边刷抬升电机，滚刷抬升电机等的，这些电机有直流有刷电机，直接无刷电机，步进电机，电磁阀，挪动泵等不同类型。电机的原理，驱动控制方式也不行。接下来一段时间的几个文章会作个专题分析分享。直流有刷电机会自动持续
  • 绘本讲师训练营【24期】8/21阅读原创《独生小孩》 1784e22615e0
    24016-孟娟《独生小孩》图片发自App今天我想分享一个蛮特别的绘本，讲的是一个特殊的群体，我也是属于这个群体，80后的独生小孩。这是一本中国绘本，作者郭婧，也是一个80厚。全书一百多页，均为铅笔绘制，虽然为黑白色调，但并不显得沉闷。全书没有文字，犹如“默片”，但并不影响读者对该作品的理解，反而显得神秘，梦幻，給读者留下想象的空间。作者在前蝴蝶页这样写到：“我更希望父母和孩子一起分享这本书，使他
  • 30天风格练习-DAY2 黄希夷
    Day2（重义）在一个周日/一周的最后一天，我来到位于市中心/市区繁华地带的一家购物中心/商场，中心内人很多/熙熙攘攘。我注意到/看见一个独行/孤身一人的年轻女孩/，留着一头引人注目/长过腰际的头发，上身穿一件暗红色/比正红色更深的衣服/穿在身体上的东西。走下扶梯的时候，她摔倒了/跌向地面，在她正要站起来/让身体离开地面的时候，过长/超过一般人长度的头发被支撑身体/躯干的手掌压/按在下面，她赶紧用
  • 消息中间件有哪些常见类型 xmh-sxh-1314 java
    消息中间件根据其设计理念和用途，可以大致分为以下几种常见类型：点对点消息队列（Point-to-PointMessagingQueues）：在这种模型中，消息被发送到特定的队列中，消费者从队列中取出并处理消息。队列中的消息只能被一个消费者消费，消费后即被删除。常见的实现包括IBM的MQSeries、RabbitMQ的部分使用场景等。适用于任务分发、负载均衡等场景。发布/订阅消息模型（Pub/Sub
  • 高级编程--XML+socket练习题 masa010 java开发语言
    1.北京华北2114.8万人上海华东2,500万人广州华南1292.68万人成都华西1417万人（1）使用dom4j将信息存入xml中（2）读取信息，并打印控制台（3）添加一个city节点与子节点（4）使用socketTCP协议编写服务端与客户端，客户端输入城市ID，服务器响应相应城市信息（5）使用socketTCP协议编写服务端与客户端，客户端要求用户输入city对象，服务端接收并使用dom4j
  • 抖音乐买买怎么加入赚钱?赚钱方法是什么 测评君高省
    你会在抖音买东西吗?如果会，那么一定要免费注册一个乐买买，抖音直播间，橱窗，小视频里的小黄车买东西都可以返佣金!省下来都是自己的，分享还可以赚钱乐买买是好省旗下的抖音返佣平台，乐买买分析社交电商的价值，乐买买属于今年难得的副业项目风口机会，2019年错过做好省的搞钱的黄金时期，那么2022年千万别再错过乐买买至于我为何转到高省呢？当然是高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自
  • 那个抄袭的大张伟 猫小努
    最近一直在追《即刻电音》这个综艺，除了觉得出场节目的音乐制作人有意思之外，也觉得有两个导师挺有趣的（另外一个就忽略了吧）。孙艺兴在上一篇文章里面已经说过了，那么这篇就说说我们的大老师，大张伟吧。其实在节目刚开始大张伟出来的时候，我以为他是属于导师里面来活跃气氛负责搞笑的，毕竟孙艺兴属于卖萌卖傻卖老实的，尚雯婕一般负责装逼耍狠的，而大张伟一贯以来上综艺的形象基本上都是蹦蹦跳跳带动气氛的。谁知道，两期
  • 三大师传 beca酱
    巴尔扎克的作品被誉为“法国社会的一面镜子”。文学大师维克多·雨果对巴尔扎克的评价是：“在最伟大的人物中间，巴尔扎克是名列前茅者；在最优秀的人物中间，巴尔扎克是佼佼者之一。”一个原本寂寂无名的小人物，从地中海的某个海岛上，只身一人来到巴黎，没有朋友，也没有名望。作为一个一文不名的外乡人，凭着赤手空拳赢得了巴黎，征服了整个法兰西，并且赢得了世界。这个人就是十九世纪法国伟大的军事家、政治家，法兰西第一帝
  • 2018-07-23-催眠日作业-#不一样的31天#-66小鹿 小鹿_33
    预言日：人总是在逃避命运的路上，与之不期而遇。心理学上有个著名的名词，叫做自证预言；经济学上也有一个很著名的定律叫做，墨菲定律；在灵修派上，还有一个很著名的法则，叫做吸引力法则。这3个领域的词，虽然看起来不太一样，但是他们都在告诉人们一个现象：你越担心什么，就越有可能会发生什么。同样的道理，你越想得到什么，就应该要积极地去创造什么。无论是自证预言，墨菲定律还是吸引力法则，对人都有正反2个维度的影响
  • 水平垂直居中的几种方法（总结） LJ小番茄 CSS_玄学语言htmljavascript前端csscss3
    1.使用flexbox的justify-content和align-items.parent{display:flex;justify-content:center;/*水平居中*/align-items:center;/*垂直居中*/height:100vh;/*需要指定高度*/}2.使用grid的place-items:center.parent{display:grid;place-item
  • 回溯 Leetcode 332 重新安排行程 mmaerd Leetcode刷题学习记录leetcode算法职场和发展
    重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
  • 每日一题——第八十九题 互联网打工人no1 C语言程序设计每日一练c语言
    题目：在字符串中找到提取数字，并统计一共找到多少整数，a123xxyu23&8889，那么找到的整数为123，23，8889//思想：#include#include#includeintmain(){charstr[]="a123xxyu23&8889";intcount=0;intnum=0;//用于临时存放当前正在构建的整数。boolinNum=false;//用于标记当前是否正在读取一个整
  • Python数据分析与可视化实战指南 William数据分析 pythonpython数据
    在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
  • redis学习笔记——不仅仅是存取数据 Everyday都不同 returnSourceexpire/delincr/lpush数据库分区redis
    最近项目中用到比较多redis，感觉之前对它一直局限于get/set数据的层面。其实作为一个强大的NoSql数据库产品，如果好好利用它，会带来很多意想不到的效果。（因为我搞java，所以就从jedis的角度来补充一点东西吧。PS：不一定全，只是个人理解，不喜勿喷）   1、关于JedisPool.returnSource(Jedis jeids)   这个方法是从red
  • SQL性能优化-持续更新中。。。。。。 atongyeye oraclesql
    1 通过ROWID访问表--索引 你可以采用基于ROWID的访问方式情况,提高访问表的效率, , ROWID包含了表中记录的物理位置信息..ORACLE采用索引(INDEX)实现了数据和存放数据的物理位置(ROWID)之间的联系. 通常索引提供了快速访问ROWID的方法,因此那些基于索引列的查询就可以得到性能上的提高. 2 共享SQL语句--相同的sql放入缓存 3 选择最有效率的表
  • [JAVA语言]JAVA虚拟机对底层硬件的操控还不完善 comsci JAVA虚拟机
         如果我们用汇编语言编写一个直接读写CPU寄存器的代码段，然后利用这个代码段去控制被操作系统屏蔽的硬件资源，这对于JVM虚拟机显然是不合法的，对操作系统来讲，这样也是不合法的，但是如果是一个工程项目的确需要这样做，合同已经签了，我们又不能够这样做，怎么办呢？ 那么一个精通汇编语言的那种X客，是否在这个时候就会发生某种至关重要的作用呢？ &n
  • lvs- real 男人50 LVS
    #!/bin/bash # # Script to start LVS DR real server. # description: LVS DR real server # #.  /etc/rc.d/init.d/functions VIP=10.10.6.252 host='/bin/hostname' case "$1" in sta
  • 生成公钥和私钥 oloz DSA安全加密
    package com.msserver.core.util; import java.security.KeyPair; import java.security.PrivateKey; import java.security.PublicKey; import java.security.SecureRandom; public class SecurityUtil {
  • UIView 中加入的cocos2d，背景透明 374016526 cocos2dglClearColor
    要点是首先pixelFormat:kEAGLColorFormatRGBA8，必须有alpha层才能透明。然后view设置为透明glView.opaque = NO;[director setOpenGLView:glView];[self.viewController.view setBackgroundColor:[UIColor clearColor]];[self.viewControll
  • mysql常用命令 香水浓 mysql
    连接数据库 mysql -u troy -ptroy 备份表 mysqldump -u troy -ptroy mm_database mm_user_tbl > user.sql 恢复表（与恢复数据库命令相同） mysql -u troy -ptroy mm_database < user.sql 备份数据库 mysqldump -u troy -ptroy
  • 我的架构经验系列文章 - 后端架构 - 系统层面 agevs JavaScriptjquerycsshtml5
    系统层面： 高可用性 所谓高可用性也就是通过避免单独故障加上快速故障转移实现一旦某台物理服务器出现故障能实现故障快速恢复。一般来说，可以采用两种方式，如果可以做业务可以做负载均衡则通过负载均衡实现集群，然后针对每一台服务器进行监控，一旦发生故障则从集群中移除；如果业务只能有单点入口那么可以通过实现Standby机加上虚拟IP机制，实现Active机在出现故障之后虚拟IP转移到Standby的快速
  • 利用ant进行远程tomcat部署 aijuans tomcat
    在javaEE项目中，需要将工程部署到远程服务器上，如果部署的频率比较高，手动部署的方式就比较麻烦，可以利用Ant工具实现快捷的部署。这篇博文详细介绍了ant配置的步骤（http://www.cnblogs.com/GloriousOnion/archive/2012/12/18/2822817.html），但是在tomcat7以上不适用，需要修改配置，具体如下： 1.配置tomcat的用户角色
  • 获取复利总收入 baalwolf 获取
           public static void main(String args[]){         int money=200;         int year=1;         double rate=0.1; &
  • eclipse.ini解释 BigBird2012 eclipse
    大多数java开发者使用的都是eclipse，今天感兴趣去eclipse官网搜了一下eclipse.ini的配置，供大家参考，我会把关键的部分给大家用中文解释一下。还是推荐有问题不会直接搜谷歌，看官方文档，这样我们会知道问题的真面目是什么，对问题也有一个全面清晰的认识。 Overview 1、Eclipse.ini的作用 Eclipse startup is controlled by th
  • AngularJS实现分页功能 bijian1013 JavaScriptAngularJS分页
            对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。既然在整个应用中这是一种很常见的需求，那么把这一功能抽象成一个通用的、可复用的分页（Paginator）服务是很有意义的。   &nbs
  • [Maven学习笔记三]Maven archetype bit1129 ArcheType
    archetype的英文意思是原型，Maven archetype表示创建Maven模块的模版，比如创建web项目，创建Spring项目等等.   mvn archetype提供了一种命令行交互式创建Maven项目或者模块的方式，   mvn archetype   1.在LearnMaven-ch03目录下，执行命令mvn archetype:gener
  • 【Java命令三】jps bit1129 Java命令
    jps很简单，用于显示当前运行的Java进程，也可以连接到远程服务器去查看   [hadoop@hadoop bin]$ jps -help usage: jps [-help] jps [-q] [-mlvV] [<hostid>] Definitions: <hostid>: <hostname>[:
  • ZABBIX2.2 2.4 等各版本之间的兼容性 ronin47
    zabbix更新很快，从2009年到现在已经更新多个版本，为了使用更多zabbix的新特性，随之而来的便是升级版本，zabbix版本兼容性是必须优先考虑的一点 客户端AGENT兼容 zabbix1.x到zabbix2.x的所有agent都兼容zabbix server2.4：如果你升级zabbix server，客户端是可以不做任何改变，除非你想使用agent的一些新特性。 Zabbix代理（p
  • unity 3d还是cocos2dx哪个适合游戏？ brotherlamp unity自学unity教程unity视频unity资料unity
    unity 3d还是cocos2dx哪个适合游戏？ 问：unity 3d还是cocos2dx哪个适合游戏？ 答：首先目前来看unity视频教程因为是3d引擎，目前对2d支持并不完善，unity 3d 目前做2d普遍两种思路，一种是正交相机，3d画面2d视角，另一种是通过一些插件，动态创建mesh来绘制图形单元目前用的较多的是2d toolkit，ex2d，smooth moves，sm2，
  • 百度笔试题：一个已经排序好的很大的数组，现在给它划分成m段，每段长度不定，段长最长为k，然后段内打乱顺序，请设计一个算法对其进行重新排序 bylijinnan java算法面试百度招聘
    import java.util.Arrays; /** * 最早是在陈利人老师的微博看到这道题： * #面试题#An array with n elements which is K most sorted，就是每个element的初始位置和它最终的排序后的位置的距离不超过常数K * 设计一个排序算法。It should be faster than O(n*lgn)。
  • 获取checkbox复选框的值 chiangfai checkbox
    <title>CheckBox</title> <script type = "text/javascript"> doGetVal: function doGetVal() { //var fruitName = document.getElementById("apple").value;//根据
  • MySQLdb用户指南 chenchao051 mysqldb
    原网页被墙，放这里备用。 MySQLdb User's Guide Contents Introduction Installation _mysql MySQL C API translation MySQL C API function mapping Some _mysql examples MySQLdb
  • HIVE 窗口及分析函数 daizj hive窗口函数分析函数
    窗口函数应用场景： （1）用于分区排序 （2）动态Group By （3）Top N （4）累计计算 （5）层次查询 一、分析函数 用于等级、百分点、n分片等。 函数             说明 RANK()     &nbs
  • PHP ZipArchive 实现压缩解压Zip文件 dcj3sjt126com PHPzip
    PHP ZipArchive 是PHP自带的扩展类，可以轻松实现ZIP文件的压缩和解压，使用前首先要确保PHP ZIP 扩展已经开启，具体开启方法就不说了，不同的平台开启PHP扩增的方法网上都有，如有疑问欢迎交流。这里整理一下常用的示例供参考。 一、解压缩zip文件 01 02 03 04 05 06 07 08 09 10 11
  • 精彩英语贺词 dcj3sjt126com 英语
    I'm always here              我会一直在这里支持你                &nb
  • 基于Java注解的Spring的IoC功能 e200702084 javaspringbeanIOCOffice
                                      
  • java模拟post请求 geeksun java
    一般API接收客户端（比如网页、APP或其他应用服务）的请求，但在测试时需要模拟来自外界的请求，经探索，使用HttpComponentshttpClient可模拟Post提交请求。 此处用HttpComponents的httpclient来完成使命。 import org.apache.http.HttpEntity ; import org.apache.http.HttpRespon
  • Swift语法之 ---- ?和!区别 hongtoushizi ?swift!
    转载自： http://blog.sina.com.cn/s/blog_71715bf80102ux3v.html   Swift语言使用var定义变量，但和别的语言不同，Swift里不会自动给变量赋初始值，也就是说变量不会有默认值，所以要求使用变量之前必须要对其初始化。如果在使用变量之前不进行初始化就会报错： var stringValue : String //
  • centos7安装jdk1.7 jisonami jdkcentos
    安装JDK1.7 步骤1、解压tar包在当前目录 [root@localhost usr]#tar -xzvf jdk-7u75-linux-x64.tar.gz 步骤2：配置环境变量 在etc/profile文件下添加 export JAVA_HOME=/usr/java/jdk1.7.0_75 export CLASSPATH=/usr/java/jdk1.7.0_75/lib
  • 数据源架构模式之数据映射器 home198979 PHP架构数据映射器datamapper
    前面分别介绍了数据源架构模式之表数据入口、数据源架构模式之行和数据入口数据源架构模式之活动记录，相较于这三种数据源架构模式，数据映射器显得更加“高大上”。   一、概念 数据映射器（Data Mapper）：在保持对象和数据库（以及映射器本身）彼此独立的情况下，在二者之间移动数据的一个映射器层。概念永远都是抽象的，简单的说，数据映射器就是一个负责将数据映射到对象的类数据。 &nb
  • 在Python中使用MYSQL pda158 mysqlpython
    缘由 　　近期在折腾一个小东西须要抓取网上的页面。然后进行解析。将结果放到 数据库中。 　　了解到 Python在这方面有优势，便选用之。 　　由于我有台 server上面安装有 mysql，自然使用之。在进行数据库的这个操作过程中遇到了不少问题，这里 记录一下，大家共勉。 　　 python中mysql的调用 　　 百度之后能够通过MySQLdb进行数据库操作。
  • 单例模式 hxl1988_0311 java单例设计模式单件
    package com.sosop.designpattern.singleton; /* * 单件模式：保证一个类必须只有一个实例，并提供全局的访问点 * * 所以单例模式必须有私有的构造器，没有私有构造器根本不用谈单件 * * 必须考虑到并发情况下创建了多个实例对象 * */ /** * 虽然有锁，但是只在第一次创建对象的时候加锁，并发时不会存在效率
  • 27种迹象显示你应该辞掉程序员的工作 vipshichg 工作
    1、你仍然在等待老板在2010年答应的要提拔你的暗示。 2、你的上级近10年没有开发过任何代码。 3、老板假装懂你说的这些技术，但实际上他完全不知道你在说什么。 4、你干完的项目6个月后才部署到现场服务器上。 5、时不时的，老板在检查你刚刚完成的工作时，要求按新想法重新开发。 6、而最终这个软件只有12个用户。 7、时间全浪费在办公室政治中，而不是用在开发好的软件上。 8、部署前5分钟才开始测试。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他