Mike的读书季
Mike的读书季

Babel入门

简述

Babel 是一个解决 javascript 兼容性问题的工具链，它支持将 ECMAScript 2015 及更新的 javascript 代码转换为可兼容早期 javascript 版本的代码，从而兼容不同浏览器或者其他运行环境（如不同的 node.js 版本）。从本质上讲，Babel 就是一个编译器。

下面示例把 ES2015 的箭头函数转换为了 funtion 函数：

//  Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);

//  Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});
Babel入门_第1张图片
upload.png

安装 & 运行

安装三个包

至少在项目中安装以下包(开发环境中安装即可)：

yarn add --dev @babel/core @babel/cli @babel/preset-env

如果要支持 typescript，则需要再多安装一个预设环境：

yarn add --dev @babel/preset-typescript

配置Babel

Babel版本≥v7.8

如果你的 Babel 版本大于等于 v7.8.0，则可以使用 json 文件来配置。在项目根目录中创建一个名为 babel.config.json 的文件，基本内容为：

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1",
          "node": "current",
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5",
      }
    ]
  ]
}

简单来说，上面文件通过 presets 字段预置了 @babel/env 环境。其中，指定了目标运行环境及其版本号；babel 将会把源码转换为能够适配这些运行环境的代码。

如果和你的运行环境不同，可依具体情况修改、增加或减少目标平台及版本。

Babel版本小于v7.8

如果 Babel 版本小于 v7.8.0，则需要通过 js 文件来配置。在项目根目录中创建一个名为 babel.config.js 的文件，内容为：

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
        node: "current",
      },
      useBuiltIns: "usage",
      "corejs": "3.6.4",
    },
  ],
];

module.exports = { presets };

本文将以该方式进行说明

编译

编译单个文件

在项目的 src 目录下创建一个文件 test.ts：

const welcome = (name: string): string => {
  return `Hello ${name}`;
}
console.log(welcome.toString())
console.log(welcome("linxiaozhou"))

在项目根目录执行命令：

./node_modules/.bin/babel src/test.js --out-file dist/test.js

Babel会将 src/test.ts 文件进行编译，同时将编译后的文件输出到 dist/test.js。

如果你不想用 typescript，则将 .ts 改为 .js 即可。

或者更简单地、使用 npx（npm package runner，[email protected] 及更高版本提供）命令：

npx babel src/test.ts --out-file dist/test.js

如果不指定 --out-file dist/test.js 输出的路径，则 Babel 会直接把编译后的文件在控制台打印出来：

Babel入门_第2张图片
upload.png

编译指定目录

将 src 目录下的全部文件转换并存储在 dist 目录中：

npx babel src --out-dir dist

如果要编译 typescript 代码，必须显式地指定后缀名(--extensions ".ts" 或使用简写 -x ".ts")，而如果代码中既有 js 又有 ts，则可以指定两种：

npx babel src -x ".js,.ts" --out-dir dist

写进package.json

为了方便我们部署，可以将编译的命令直接写进 package.json：

{
    ...
  "scripts": {
    "build": "babel src -x \".js,.ts\" --out-dir dist",
    ...
}

运行

有时候我们需要在 node.js 环境下通过命令直接运行编译后的 javascript 或 typescript 文件、并且不想先 build 出一个文件。此时我们就需要一个安装一个 @babel/node 工具：

yarn add --dev @babel/node

基本命令格式为：

babel-node [options] [ -e script | script.js ] [arguments]
Babel入门_第3张图片
upload.png

详情可参看下面链接： https://babeljs.io/docs/en/babel-node

编译并运行js文件

在项目根目录中创建一个测试文件 test.js：

const welcome = name => {
  return `Hello ${name}!`;
};
console.log(welcome("linxiaozhou"));

然后执行 npx babel-node --extensions \".js,.ts\" test.js：

upload.png

编译并运行ts文件(含ts语法)

在项目根目录中创建一个测试文件 test.ts:

const welcome = (name: string): string => {
  return `Hello ${name}!`;
};
console.log(welcome.toString());
console.log(welcome("linxiaozhou"));

然后执行 npx babel-node -x ".ts" --inspect --presets @babel/preset-env test.ts：

upload.png

如果出现报错，可在命令中加上 --inspect 或写入 package.json 文件并通过 yarn 命令运行。

使用 npx babel-node 命令 需要注意以下几点：

  • 不要 在生产环境中使用它，否则会导致内存占用过高
  • 先安装 @babel/node 和 @babel/core，再使用 npx babel-node 命令，否则npx会安装过期的 babel-node

配置你的Babel

Babel的工作原理

Babel 是一个编译器，通过 Babel 可以将源码编译成目标代码：


Babel入门_第4张图片
upload.png

如果把 Babel 看做一个黑盒，则黑盒内需要通过 解析(parsing) -> 转换(transforming) -> 打印(printing) （有些地方叫 代码生成Generate）三个步骤来实现源码的编译。

Babel入门_第5张图片
upload.png

而其中最为关键的步骤就是 转换(transforming )。如果里面什么也没做，那么输出的就是源码本身。而这个步骤是插件式的，里面堆满了(也可能一个都没有)插件，在我们触发了 Babel 的编译动作后， Babel 内核会使用这些插件对源码进行转换，从而实现编译的功能。

Babel入门_第6张图片
upload.png

这里有两个关键词需要理解：

  • 插件 Plugins
    即转换插件(Transform Plugins)，每一个插件都可用于转换你的源码。如果你想看看有哪些插件可用，可以阅读官方文档。
    官方文档：https://babeljs.io/docs/en/plugins#transform-plugins
  • **预置库 Presets **
    提供了按照一定规则组织插件的方式，支持用户使用官方提供、其他用户共享或者用户自己定义预置库，每一个预置库都可以批量声明使用哪些插件、每个插件的参数是什么。Babel提供了一些常用的预置库，可以参考官方文档。
    官方文档：https://babeljs.io/docs/en/presets

可以说，每一个独立的插件(Plugins)都各自规定了转换源码的规则，而预置库(Presets)则用于组织多个插件，两者都有各自的应用场景。

配置方式

关于配置方式的说明，可以参考这篇官方文档：
https://babeljs.io/docs/en/config-files#configuration-file-types

针对 Babel 的配置，有以下几种方式：

  • 配置文件：通过配置文件来指定项目或文件夹(模块)的 Babel 配置
  • 命令行：通过 @babel/cli 命令行来执行指定的 Babel 配置
  • API： 通过 @babel/core 调用api的方式来使用指定的 Babel 配置

配置文件

以文件形式进行 Babel 配置则有两种方式：

  • 项目范围配置(Project-wide configuration): 前文提到的 Babel 版本≥ v7.8.0的 babel.config.json 或 Babel 版本小于 v7.8.0的babel.config.js 都属于项目层面的Babel配置
  • 目录配置(File-relative configuration): 可以通过遍历项目内各文件夹(模块)中的 .babelrc.json 文件和 package.json(含 babel 字段内容)，来单独指定这个文件夹(模块)的编译要求

而配置文件又可以分为两类：json 和 js，其书写规则分别为：

{
  "presets": [...],
  "plugins": [...]
}

和

module.exports = function (api) {
  api.cache(true);

  const presets = [ ... ];
  const plugins = [ ... ];

  return {
    presets,
    plugins
  };
}

此外，package.json 的书写规则有一些不同，需要在 babel 字段下书写，例如：

{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    "presets": [ ... ],
    "plugins": [ ... ],
  }
}

如果需要写一个拓展性好的配置文件，建议使用 js 文件来书写。这样可以通过指定不同的环境来增减插件及预置。下面官方例子中，通过全局环境的判断，为线上环境增加新的插件。

const presets = [ ... ];
const plugins = [ ... ];

if (process.env["ENV"] === "prod") {
  plugins.push(...);
}

module.exports = { presets, plugins };

命令行

在通过命令行来执行 Babel 命令时，可以通过 --plugins 来指定使用的插件、通过 --presets 来指定预置库

babel --plugins @babel/plugin-transform-arrow-functions script.js

API

下面给出了一个官方示例：

require("@babel/core").transform("code", {
  plugins: ["@babel/plugin-transform-arrow-functions"]
});

本文不对这部分做详细介绍，如需了解更多信息，可参考下面链接：
https://babeljs.io/docs/en/babel-core#transform

插件 Plugins

前文已经说明，插件是管理 Babel 转换规则的最小单元。Babel 提供了如下模块，每个模块都有一个或多个的插件可供使用：

  • ES3
  • ES5
  • ES2015
  • ES2016
  • ES2017
  • ES2018
  • Modules
  • Experimental
  • Minification
  • React
  • Other

基本格式和使用

插件的声明格式为：

{
  "plugins": ["pluginA", ["pluginB"], ["pluginC", {}]]
}

其中，插件 pluginC 传入了一个选项 {}，具体的参数依插件而定。

下面给出了一个例子：

{
  "plugins": [
    [
      "transform-async-to-module-method",
      {
        "module": "bluebird",
        "method": "coroutine"
      }
    ]
  ]
}

这里为 Babel 编译器设置了一个名为 transform-async-to-module-method 的插件，同时传入了参数：

{
    "module": "bluebird",
    "method": "coroutine"
}

引入路径

如果一个插件在 npm 上，可以直接声明其名称：

{
  "plugins": ["babel-plugin-myPlugin"]
}

你也可以直接引入路径：

{
  "plugins": ["./node_modules/asdf/plugin"]
}

简写

如果一个插件的名称是 babel-plugin- 打头，则可以简写剩余的文本：

{
  "plugins": [
    "myPlugin",
    "babel-plugin-myPlugin" // 与上一行等价
  ]
}

或者，插件位于一个组织(scoped package)下：

{
  "plugins": [
    "@org/babel-plugin-name",
    "@org/name" // 在@org下，等价于babel-plugin-name
  ]
}

运行顺序

当有多个插件要运行的时候，将会按声明的顺序运行。例如：

{
  "plugins": ["plugin1", "plugin2", "plugin3"]
}

上面示例中，将会按这个顺序运行：plugin1 -> plugin2 -> plugin3

需要注意区分的是，预置库的运行顺序是 相反的。例如：

{
  "presets": ["preset1", "preset2", "preset3"]
}

这个例子中，将会按照这个顺序运行：preset1 -> preset2 -> preset3

创建一个插件

如果想要创建一个自己的插件，可以阅读官方文档，这里不做说明。
官方文档：https://github.com/jamiebuilds/babel-handbook

预置Presets

官方提供了一些预置库供我们使用：

  • @babel/preset-env: 最新的 javascript 预设配置
  • @babel/preset-flow: 针对 Flow 的预设配置
  • @babel/preset-react: 针对 React.js 的预设配置
  • @babel/preset-typescript 针对 typescript 的预设配置

预置Presets其实是在管理各种插件 Plugins，通过组合不同的插件 Plugins 来管理编译代码的方式。如 @babel/preset-typescript 就是包含了 @babel/plugin-transform-typescript 插件

预置库的基本声明格式为：

{
  "presets": [
    "presetA",
    ["presetA"],
    ["presetA", {}],
  ]
}

其中，{} 为该预置库的选项（OPTIONS）。

@babel/preset-env

安装

需要注意的是，Babel 不应该出现在生产环境中，因此需要加上 --dev（npm 安装则加上--save-dev）：

yarn add @babel/preset-env --dev

书写格式

基本格式为：

{
  presets: [
    [
      "@babel/preset-env",
      
    ]
  ]
}

其中， 为可选项，可以不填（但不推荐）！

下面给出了一个简单的示例：

{
  presets: [
    // 预置库1：preset-env
    [
      "@babel/preset-env",
      {
        targets: {
          chrome: "58",
          ie: "11",
        },
      },
    ],

    // 其他预置库
    // ...
  ],
}

上面示例中，presets 字段的值为数组，每个元素是一个数组；此外，每个元素也可以是一个字符串（如 "@babel/preset-typescript" ），例如：

{
  presets: [
    // 预置库1：preset-env
    [
      "@babel/preset-env",
      {
        targets: {
          chrome: "58",
          ie: "11",
        },
      },
    ],

    // 预置库2：preset-typescript
    "@babel/preset-typescript"`,

    // 其他预置库
    // ...
  ],
}

下面几节内容会针对一些常用的 options 作进一步说明。如需查看完整的介绍，可以打开以下链接阅读官方文档：
https://babeljs.io/docs/en/babel-preset-env#options

options.targets

targets 格式为 string | Array | { [string]: string } ，默认值为 {}

参数targets.
类型：string
说明：指定你的项目要支持的目标环境，可以支持的环境包括但不限于：chrome, opera, edge, firefox, safari, ie, ios, android, node, electron
举例：

{
   targets: {
      chrome: 58,
      ie: 1,
    }
}

参数targets.esmodules
类型：boolean
说明：如果目标浏览器支持 ES Modules，则置为 true。如果声明了该字段，则 targets.browsers 字段会被忽略。
举例：

{
   targets: {
      esmodules: true
    }
}

参数targets.node
类型：string | "current" | true
说明：如果要编译为当前版本 node.js 的版本，则置为 "current" 或 true
举例：

{
   targets: {
      node: "current"
    }
}

参数targets.safari
类型：string | "tp"
说明：如果要编译为 Safiri 的预览版(technology preview)，则置为 "tp"
举例：

{
   targets: {
      safari: "tp"
    }
}

参数targets.browsers
类型：string | Array
说明：可以用单个字符串，也可以用字符串数组。其完整说明可参照这个链接：https://github.com/browserslist/browserslist#full-list
举例：

{
   targets: {
      browsers: "> 0.25%, not dead"
    }
}

或者写作数组：

{
    targets:  {
      browsers: [
          "> 0.25%",
          "not dead"
        ]
    }
}

需要注意的是，如果 target. 有与之冲突的，会以 target. 设定的参数为准。此外，targets.browsers 参数会在后续版本中移除，可以直接写入 targets 中，例如：

{
  "targets": "> 0.25%, not dead"
}

options.loose

宽松模式开关，类型为boolean，默认为 false。当 loose: true 时，将启用宽松模式。

下面给出了一个示例：

// INPUT
class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return `(${this.x}, ${this.y})`;
    }
}

在非宽松模式下，需要严格按照ES6规范来定义：

// OUTPUT: loose===false
"use strict";

var _createClass = (function () {
    function defineProperties(target, props) {
        for (var i = 0; i < props.length; i++) {
            var descriptor = props[i];
            descriptor.enumerable = descriptor.enumerable || false;
            descriptor.configurable = true;
            if ("value" in descriptor) descriptor.writable = true;
            Object.defineProperty(target, descriptor.key, descriptor); // (A)
        }
    }
    return function (Constructor, protoProps, staticProps) {
        if (protoProps) defineProperties(Constructor.prototype, protoProps);
        if (staticProps) defineProperties(Constructor, staticProps);
        return Constructor;
    };
})();

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

var Point = (function () {
    function Point(x, y) {
        _classCallCheck(this, Point);

        this.x = x;
        this.y = y;
    }

    _createClass(Point, [{
        key: "toString",
        value: function toString() {
            return "(" + this.x + ", " + this.y + ")";
        }
    }]);

    return Point;
})();

在宽松模式下，编译出的代码更像是我们按照 ES5 规范手写的代码：

// OUTPUT: loose === true
"use strict";

function _classCallCheck(instance, Constructor) { ··· }

var Point = (function () {
    function Point(x, y) {
        _classCallCheck(this, Point);

        this.x = x;
        this.y = y;
    }

    Point.prototype.toString = function toString() { // (A)
        return "(" + this.x + ", " + this.y + ")";
    };

    return Point;
})();

更多官方说明，请参看这篇文档
https://2ality.com/2015/12/babel6-loose-mode.html

options.modules

可选参数有 "amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false，默认为 auto

其中 cjs 是 commonjs 的别名

编写一个自己的预置库

如果我们有多个项目需要共享一个定制的预置库，我们可以自己编写一个预置库并发布到 npm。预置库暴露出去的 js 文件基本格式如下：

// index.js

module.exports = function() {
  return {
    // 包含其他预置库
    presets: [
      "preset1",
      "preset2",
      "preset3",
    ],

    // 指定需要引入的插件
    plugins: [
      "pluginA",
      "pluginB",
      "pluginC",
    ]
  };
}

举个例子，我们需要引入默认的预置库、同时引入两个插件：

// index.js

module.exports = () => ({
  presets: [
    require("@babel/preset-env"),
  ],
  plugins: [
    [require("@babel/plugin-proposal-class-properties"), { loose: true }],
    require("@babel/plugin-proposal-object-rest-spread"),
  ],
});

引入规则

前面介绍了官方提供的预置库，同时给出了自己编写预置库的方式。那么，如何在项目中引用它们呢？

引入路径

不论是官方的还是自定义的预置库，如果是已经安装到 node_modules 的，都按照这个方式引入：

{
  "presets": ["babel-preset-myPreset"]
}

例如：

{
  "presets": [
      "@babel/preset-react",
      "babel-preset-myPreset",
    ]
}

如果一个预置库没有安装到 node_modules 中（即为项目的文件），则通过路径来引入：

{
  "presets": ["./myProject/myPreset"]
}

例如：

{
  "presets": [
      "@babel/preset-react",
      "./myProject/babel-preset-myPreset",
    ]
}

简写

上一节的第一个例子中，如果一个预置库的包名称为 babel-preset- 开头，可以简写后面的名称。例如一个预置库的包名为 babel-preset-myPreset，则可以简写做 myPreset：

{
  "presets": [
    "myPreset",
    "babel-preset-myPreset" // 与上一行等价
  ]
}

运行顺序

如果有一个预置库如下：

{
  "presets": [
    "a",
    "b",
    "c"
  ]
}

则运行的顺序为：c -> b -> a，它和插件的运行顺序 刚好相反。

插件与预置库的覆盖处理

如果使用了多个预置库，应该怎么覆盖相关配置呢？Babel 会：

  • 使用 Object.assign 按顺序覆盖 plugins 和 presets 以外的字段
  • 使用 Array.concat 分别合并plugins 和 presets 字段。参考官方例子：
const config = {
  plugins: [["plugin-1a", { loose: true }], "plugin-1b"],
  presets: ["preset-1a"],
  sourceType: "script"
}

const newConfigItem = {
  plugins: [["plugin-1a", { loose: false }], "plugin-2b"],
  presets: ["preset-1a", "preset-2a"],
  sourceType: "module"
}

BabelConfigMerge(config, newConfigItem);
// returns
({
  plugins: [
    ["plugin-1a", { loose: true }],
    "plugin-1b",
    ["plugin-1a", { loose: false }],
    "plugin-2b"
  ], // new plugins are pushed
  presets: [
    "preset-1a",
    "preset-1a",
    "preset-2a"
  ], // new presets are pushed
  sourceType: "module" // sourceType: "script" is overwritten
})

注：示例来自官网、有修改。官网的示例中，合并后的 presets 应该写错了

Babel入门_第7张图片
upload.png

https://babeljs.io/docs/en/configuration#how-babel-merges-config-items

基本命令

@babel/cli 为开发者提供了 Babel 命令行，我们可以在命令行中直接使用 Babel。本章将介绍几个常用的命令。

官方文档：https://babeljs.io/docs/en/babel-cli

安装

前面已经提到，在安装 Babel 的时候，一般都已经安装。如果没有，可单独执行：

yarn add --dev @babel/core @babel/cli

需要注意的是，如果你的项目中没有 package.json 文件，务必在安装之前创建一个，否则会影响 npx 的使用。（如果你不想用 npx 命令，则可以使用 ./node_modules/.bin/babel 替代 npx babel）

编译单个文件

执行下面命令，将在控制台打印出编译后的结果：

npx babel src/test.ts

或

./node_modules/.bin/babel src/test.ts

如果需要把编译后的内容另存为一个文件，则可以加上 --out-file 或者 -o 参数并制定新文件名：

npx babel src/test.ts --out-file dist/test.js

Soure Map

Babel 提供了 Source Map，加上参数 --source-maps：

npx babel src/test.ts --out-file dist/test.js --source-maps

编译文件夹

如果需要把整个文件夹的文件（及子文件夹里的文件）编译并指定输出目录，可以使用 --out-dir 参数。下面命令把 src 目录编译并输出到 dist 目录中：

npx babel src --out-dir dist

忽略一些文件

如果要编译的目录中有不需要编译的文件，可以设置参数为 --ignore，如：

npx babel src --out-dir dist --ignore "src/**/*.spec.js","src/**/*.test.js"

上面命令中忽略了以 spec.js 和 test.js 结尾的全部文件。

指定插件

通过 --plugins 参数指定要使用的插件，多个预置库用逗号 , 隔开：

npx babel src/test.ts --out-file dist/test.js --plugins=@babel/proposal-class-properties,@babel/transform-modules-amd

指定预置库

通过 --presets 参数指定要使用的预置库，多个预置库用逗号 , 隔开：

npx babel src/test.ts --out-file dist/test.js --presets=@babel/preset-env,@babel/flow

最简项目配置参考

项目结构及源码地址

项目结构图：

.
├── dist
├── src
│   └── test.ts
├── README.md
├── babel.config.js
└── package.json

项目源码地址：
https://github.com/KKDestiny/babel-setup.git

初始化项目

新建一个项目：

yarn init

填写相关信息：


Babel入门_第8张图片
upload.png

安装以下包：

yarn add --dev @babel/core @babel/cli @babel/preset-env
Babel入门_第9张图片
upload.png

如果你的项目是 typescript，则还需要安装：

yarn add --dev @babel/preset-typescript
Babel入门_第10张图片
upload.png

注意看上面的打印信息，安装这个预置库的同时也一起安装了typescript的插件 @babel/[email protected]

添加 ignore 文件：

dist/
node_modules/

yarn-error.log
yarn.lock

创建配置文件

在项目根目录新建 babel.config.js 文件：

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          node: "current",
        },
      },
    ],
    "@babel/preset-typescript",
  ],
  plugins: [
  ],
};

这里我们指定了使用 @babel/preset-env 和 @babel/preset-typescript 这两个预置库，但没有额外的插件。

注意，如果没有引入 typescript 的预置库或插件，则在编译的时候会报错：


Babel入门_第11张图片
upload.png

除了上述的方式引入 typescript，还可以通过插件的方式(记得先安装插件 yarn add --dev @babel/plugin-transform-typescript)：

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          node: "current",
        },
      },
    ],
  ],
  plugins: [
  "@babel/plugin-transform-typescript"
  ],
};

添加编译命令

设置编译命令，在 package.json 文件中增加一个 scripts 的命令：

{
  "scripts": {
    "compile": "npx babel src -x \".js,.ts\" --out-dir dist"
  }
}

这个命令是触发 Babel 编译 src 目录中的全部 js 或 ts 文件，然后拷贝到 dist 目录中。

测试

创建 src 目录，在里面创建一个 test.ts 文件：

const welcome = (name: string): string => {
  return `Hello ${name}`;
}
console.log(welcome.toString())
console.log(welcome("linxiaozhou"))

在项目根目录运行 yarn compile：

Babel入门_第12张图片
upload.png

如果运行成功，会自动创建 dist 目录（如果没有），同时把 src 目录下的全部文件编译后依次拷贝到对应位置。

编译前删除旧文件

在实际项目中，我们可能进行多次编译。如果删除了其中一些文件，则再次编译是不会自动删除这些文件的。因此建议在执行编译命令之前，先删除已经编译出来的文件(夹)，以确保生产环境的文件列表是干净的。

这里推荐一个包 rimraf，它相当于执行了Linux命令 rm -rf(强制删除文件夹及其子文件夹和包含的文件)：

yarn add  --dev rimraf

然后将 package.json 文件的 compile 命令改为：

{
  "scripts": {
    "compile": "npx rimraf dist && npx babel src -x \".js,.ts\" --out-dir dist"
  }
}

最终的 package.json 文件内容为：

{
  "name": "babel-setup",
  "version": "1.0.0",
  "main": "index.js",
  "author": "linxiaozhou.com",
  "license": "MIT",
  "scripts": {
    "compile": "npx rimraf dist && npx babel src -x \".js,.ts\" --out-dir dist"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-typescript": "^7.12.7",
    "rimraf": "^3.0.2"
  }
}

更进一步

编写插件

抽象语法树(Abstract Syntax Tree，AST 树)是什么？如何通过 AST 来编写插件？这个会在后面做进一步研究。
https://blog.csdn.net/weixin_42436686/article/details/112515290?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-2&spm=1001.2101.3001.4242

在学习 Prettier 的时候看到一个好工具，可以用来研究AST：

Babel入门_第13张图片
屏幕快照 2021-01-23 01.18.42.png

放上链接： https://prettier.io/playground

如何组织插件

可以简单地把插件分为几类：

  • proposal：处于提案状态，与ES版本有关，如果提案在选定的版本中通过，则不需要再使用
  • transform：比较稳定，一般不会有变动
  • 其他：按需添加

如何更好地去组织这些插件、形成自己的一个预置库？这是后面需要进一步了解的内容。

运行规则

有下面这样的例子。尽管我们一般不会写成这样，但如果我们调用了多个预置库，那么不同预置库中就有可能会指定同一个插件、设置不同参数。

babel-presets/babel-preset-a.js

module.exports = function() {
  return {
    plugins: [
      [
        "@babel/plugin-transform-arrow-functions",
        {
          spec: true
        }
      ],
    ]
  };
}

babel-presets/babel-preset-b.js

module.exports = function() {
  return {
    plugins: [
      [
        "@babel/plugin-transform-arrow-functions",
        {
          spec: false
        }
      ],
    ]
  };
}

可以看到，babel-preset-a 和 babel-preset-b 中都定义了使用插件 @babel/plugin-transform-arrow-functions，但传入的参数却不同：

  • 插件babel-preset-a
    传入参数为 spec: true
  • 插件babel-preset-b
    传入参数为 spec: false

如果a在前、b在后：

module.exports = {
  presets: [
    [
      "@babel/preset-env",
    ],
    "./babel-presets/babel-preset-a",
    "./babel-presets/babel-preset-b",
  ],
  plugins: [
  ],
};

如果b在前、a在后：

module.exports = {
  presets: [
    [
      "@babel/preset-env",
    ],
    "./babel-presets/babel-preset-b",
    "./babel-presets/babel-preset-a",
  ],
  plugins: [
  ],
};

以上两种情况下，分别会有什么结果？这个问题会在后续做进一步研究。

参考

  • babel: https://babeljs.io/docs/en/
  • babel-node: https://babeljs.io/docs/en/babel-node
  • typescript 预置库 @babel/preset-typescript: https://babeljs.io/docs/en/babel-preset-typescript
  • rimraf: https://github.com/isaacs/rimraf

你可能感兴趣的:(Babel入门)

  • 第四天旅游线路预览——从换乘中心到喀纳斯湖 陟彼高冈yu 基于Googleearthstudio的旅游规划和预览旅游
    第四天：从贾登峪到喀纳斯风景区入口，晚上住宿贾登峪；换乘中心有4路车，喀纳斯①号车，去喀纳斯湖，路程时长约5分钟；将上面的的行程安排进行动态展示，具体步骤见”Googleearthstudio进行动态轨迹显示制作过程“、“Googleearthstudio入门教程”和“Googleearthstudio进阶教程“相关内容，得到行程如下所示：Day4-2-480p
  • linux中sdl的使用教程,sdl使用入门 Melissa Corvinus linux中sdl的使用教程
    本文通过一个简单示例讲解SDL的基本使用流程。示例中展示一个窗口，窗口里面有个随机颜色快随机移动。当我们鼠标点击关闭按钮时间窗口关闭。基本步骤如下：1.初始化SDL并创建一个窗口。SDL_Init()初始化SDL_CreateWindow()创建窗口2.纹理渲染存储RGB和存储纹理的区别：比如一个从左到右由红色渐变到蓝色的矩形，用存储RGB的话就需要把矩形中每个点的具体颜色值存储下来；而纹理只是一
  • Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Pythonpython开发语言大数据数据分析数据挖掘
    大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
  • Python快速入门 —— 第三节：类与对象 孤华暗香 Python快速入门python开发语言
    第三节：类与对象目标：了解面向对象编程的基础概念，并学会如何定义类和创建对象。内容：类与对象：定义类：class关键字。类的构造函数：__init__()。类的属性和方法。对象的创建与使用。示例：classStudent:def__init__(self,name,age,major):self.name&#
  • C++菜鸟教程 - 从入门到精通 第二节 DreamByte c++
    一.上节课的补充(数据类型)1.前言继上节课,我们主要讲解了输入,输出和运算符,我们现在来补充一下数据类型的知识上节课遗漏了这个知识点,非常的抱歉顺便说一下,博主要上高中了,更新会慢,2-4周更新一次对了,正好赶上中秋节,小编跟大家说一句:中秋节快乐!2.int类型上节课,我们其实只用了int类型int类型,是整数类型,它们存贮的是整数,不能存小数(浮点数)定义变量的方式很简单inta;//定义一
  • STM32中的计时与延时 lupinjia STM32stm32单片机
    前言在裸机开发中，延时作为一种规定循环周期的方式经常被使用，其中尤以HAL库官方提供的HAL_Delay为甚。刚入门的小白可能会觉得既然有官方提供的延时函数，而且精度也还挺好，为什么不用呢？实际上HAL_Delay中有不少坑，而这些也只是HAL库中无数坑的其中一些。想从坑里跳出来还是得加强外设原理的学习和理解，切不可只依赖HAL库。除了延时之外，我们在开发中有时也会想要确定某段程序的耗时，这就需要
  • Python实现简单的机器学习算法 master_chenchengg pythonpython办公效率python开发IT
    Python实现简单的机器学习算法开篇：初探机器学习的奇妙之旅搭建环境：一切从安装开始必备工具箱第一步：安装Anaconda和JupyterNotebook小贴士：如何配置Python环境变量算法初体验：从零开始的Python机器学习线性回归：让数据说话数据准备：从哪里找数据编码实战：Python实现线性回归模型评估：如何判断模型好坏逻辑回归：从分类开始理论入门：什么是逻辑回归代码实现：使用skl
  • 2019考研 | 西交大软件工程 笔者阿蓉
    本科背景：某北京211学校电子信息工程互联网开发工作两年录取结果：全日制软件工程学院分数：初试350+复试笔试80+面试85+总排名：100+从五月份开始脱产学习，我主要说一下专业课和复试还有我对非全的一些看法。【数学100+】张宇，张宇，张宇。跟着张宇学习，入门视频刷一遍，真题刷两遍，错题刷三遍。书刷N多遍。从视频开始学习，是最快的学习方法。5-7月份把主要是数学学好，8-9月份开始给自己每个周
  • esp32开发快速入门 8 : MQTT 的快速入门，基于esp32实现MQTT通信 z755924843 ESP32开发快速入门服务器网络运维
    MQTT介绍简介MQTT（MessageQueuingTelemetryTransport，消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的"轻量级"通讯协议，该协议构建于TCP/IP协议上，由IBM在1999年发布。MQTT最大优点在于，可以以极少的代码和有限的带宽，为连接远程设备提供实时可靠的消息服务。作为一种低开销、低带宽占用的即时通讯协议，使其在物联
  • Armv8.3 体系结构扩展--原文版 代码改变世界ctw ARM-TEE-Androidarmv8嵌入式arm架构安全架构芯片TrustzoneSecureboot
    快速链接:.ARMv8/ARMv9架构入门到精通-[目录]付费专栏-付费课程【购买须知】:个人博客笔记导读目录(全部)TheArmv8.3architectureextensionTheArmv8.3architectureextensionisanextensiontoArmv8.2.Itaddsmandatoryandoptionalarchitecturalfeatures.Somefeat
  • Python入门之Lesson2:Python基础语法 小熊同学哦 Python入门课程python开发语言算法数据结构青少年编程
    目录前言一.介绍1.变量和数据类型2.常见运算符3.输入输出4.条件语句5.循环结构二.练习三.总结前言欢迎来到《Python入门》系列博客的第二课。在上一课中，我们了解了Python的安装及运行环境的配置。在这一课中，我们将深入学习Python的基础语法，这是编写Python代码的根基。通过本节内容的学习，你将掌握变量、数据类型、运算符、输入输出、条件语句等Python编程的基础知识。一.介绍1
  • 摄影小白，怎么才能拍出高大上产品图片？ 是波妞唉
    很多人以为文案只要会码字，会排版就OK了！说实话，没接触到这一行的时候，我的想法更简单，以为只要会写字就行！可是真做了文案才发现，码字只是入门级的基本功。一篇文章离不开排版、配图，说起来很简单！从头做到尾你就会发现，写文章用两个小时，找合适的配图居然要花掉半天的时间，甚至更久！图片能找到合适的就不怕，还有找不到的，比如产品图，只能亲自拍。拿着摆弄了半天，就是拍不出想要的效果，光线不好、搭出来丑破天
  • 2021 CCF 非专业级别软件能力认证第一轮（CSP-J1）入门级C++语言试题 （第三大题：完善程序 代码） mmz1207 c++csp
    最近有一段时间没更新了，在准备CSP考试，请大家见谅。（1）有n个人围成一个圈，依次标号0到n-1。从0号开始，依次0，1，0，1...交替报数，报到一的人离开，直至圈中剩最后一个人。求最后剩下的人的编号。#includeusingnamespacestd;intf[1000010];intmain(){intn;cin>>n;inti=0,cnt=0,p=0;while(cnt#includeu
  • Vue( ElementUI入门、vue-cli安装) m0_l5z elementuivue.js
    一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
  • Spring MVC 全面指南：从入门到精通的详细解析 一杯梅子酱 技术栈学习springmvcjava
    引言：SpringMVC，作为Spring框架的一个重要模块，为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者，掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径，通过详细的知识点分析和实际案例，帮助你快速上手SpringMVC，让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC？Spri
  • 入门MySQL——查询语法练习 K_un
    前言：前面几篇文章为大家介绍了DML以及DDL语句的使用方法，本篇文章将主要讲述常用的查询语法。其实MySQL官网给出了多个示例数据库供大家实用查询，下面我们以最常用的员工示例数据库为准，详细介绍各自常用的查询语法。1.员工示例数据库导入官方文档员工示例数据库介绍及下载链接：https://dev.mysql.com/doc/employee/en/employees-installation.h
  • ESP32-C3入门教程 网络篇⑩——基于esp_https_ota和MQTT实现开机主动升级和被动触发升级的OTA功能 小康师兄 ESP32-C3入门教程https服务器esp32OTAMQTT
    文章目录一、前言二、软件流程三、部分源码四、运行演示一、前言本文基于VSCodeIDE进行编程、编译、下载、运行等操作基础入门章节请查阅：ESP32-C3入门教程基础篇①——基于VSCode构建HelloWorld教程目录大纲请查阅：ESP32-C3入门教程——导读ESP32-C3入门教程网络篇⑨——基于esp_https_ota实现史上最简单的ESP32OTA远程固件升级功能二、软件流程
  • 2023最详细的Python安装教程（Windows版本） 程序员林哥 Pythonpythonwindows开发语言
    python安装是学习pyhon第一步，很多刚入门小白不清楚如何安装python，今天我来带大家完成python安装与配置，跟着我一步步来，很简单，你肯定能完成。第一部分：python安装（一）准备工作1、下载和安装python(认准官方网站)当然你不想去下载的话也可以分享给你，还有入门学习教程，点击下方卡片跳转进群领取（二）开始安装对于Windows操作系统，可以下载“executableins
  • 【2022 CCF 非专业级别软件能力认证第一轮（CSP-J1）入门级 C++语言试题及解析】 汉子萌萌哒 CCFnoi算法数据结构c++
    一、单项选择题(共15题，每题2分，共计30分；每题有且仅有一个正确选项)1.以下哪种功能没有涉及C++语言的面向对象特性支持：()。A.C++中调用printf函数B.C++中调用用户定义的类成员函数C.C++中构造一个class或structD.C++中构造来源于同一基类的多个派生类题目解析【解析】正确答案:AC++基础知识，面向对象和类有关，类又涉及父类、子类、继承、派生等关系，printf
  • 现金贷“租系统”产业崛起：租金3000，本金10万，一月回本 Dayon
    最近，地下现金贷的全面崛起，已成了不可阻挡的趋势。大量民间资本开始涌入，民间高利贷、炒房团、土豪的钱，都裹挟其中。而地下现金贷的入门门槛正在不断降低，一条新的产业链开始崛起：租现金贷系统。现在，只需要10万本金，花3000元租个系统，两个人的团队，一个月就能回本。大量的小本金玩家进场了，为了急速获利，他们甚至将利率调到1600%以上。业内人士称，真实的现金贷用户，现在大概只有200多万。整个行业几
  • 【树一线性代数】005入门 Owlet_woodBird 算法
    Index本文稍后补全，推荐阅读：https://blog.csdn.net/weixin_60702024/article/details/141874376分析实现总结本文稍后补全，推荐阅读：https://blog.csdn.net/weixin_60702024/article/details/141874376已知非空二叉树T的结点值均为正整数，采用顺序存储方式保存，数据结构定义如下:t
  • 如何自学软件编程？零基础自学编程入门指南 _pangzi
    前言零基础自学编程的动力是什么?在开启学习编程之路的时候必须搞清楚自己为什么要学编程?是因为工资高?还是对编程有浓厚的兴趣？还有自己有一定的编程基础想要继续提升自己？其实对于这个问题需要具体分析，如果是单纯看到程序员工资高，而自己本身并没有什么兴趣，那我不建议自学，可以选择参加培训或者不要进入编程领域不然自己学不会没有获得高薪，反而浪费了大把的时间，如果方法不对，反而会打击自信心。下面小编针对学习
  • Linux CTF逆向入门 蚁景网络安全 linux运维CTF
    1.ELF格式我们先来看看ELF文件头，如果想详细了解，可以查看ELF的manpage文档。关于ELF更详细的说明：e_shoff：节头表的文件偏移量（字节）。如果文件没有节头表，则此成员值为零。sh_offset：表示了该section（节）离开文件头部位置的距离+-------------------+|ELFheader|---++--------->+-------------------
  • python简单好玩的编程代码,python有哪些好玩的代码 2301_81900439 pygamepython开发语言
    大家好，小编来为大家解答以下问题，20行python代码的入门级小游戏，python有什么好玩的代码嘛，今天让我们一起来看看吧！哈喽铁子们表弟最近在学Python，总是跟我抱怨很枯燥无味，其实，他有没有认真想过，可能是自己学习姿势不对？比方说，可以通过打游戏来学编程！今天给大家分享100个Python小游戏，一定要收藏！1、简易飞机大战飞机大战相信大家都玩过吧，非常简单有意思的游戏，咱们通过Pyt
  • 思考成长 丁昆朋
    这篇文章是加紧赶出来“应付”日更，一方面不想要再晚睡了；另一方面不想失去日更达人的称号，只能坐下来匆忙写下一点文字。既然标题是成长，先来总结一下这段时间的收获：1、整理箱子站着可以看电脑，坐着反而是一种享受，减少了坐着腰酸背痛的现象；2、使用讯飞输入法大大增加自己的输出量；3、Anaconda+“pythontutor.com"+Google算是简单入门python；4、英语的阅读文章能力、听力提
  • HarmonyOS开发实战（ Beta5.0）搜索框热搜词自动切换 让开，我要吃人了 OpenHarmonyHarmonyOS鸿蒙开发harmonyos华为鸿蒙移动开发鸿蒙系统前端开发语言
    鸿蒙HarmonyOS开发往期必看：HarmonyOSNEXT应用开发性能实践总结最新版！“非常详细的”鸿蒙HarmonyOSNext应用开发学习路线！（从零基础入门到精通）介绍本示例介绍使用TextInput组件与Swiper组件实现搜索框内热搜词自动切换。效果图预览使用说明页面顶部搜索框内热搜词条自动切换，编辑搜索框时自动隐藏。实现思路使用TextInput实现搜索框TextInput({te
  • mysql学习教程，从入门到精通，TOP 和MySQL LIMIT 子句（15） 知识分享小能手 大数据数据库MySQLmysql学习oracle数据库开发语言adb大数据
    1、TOP和MySQLLIMIT子句内容在SQL中，不同的数据库系统对于限制查询结果的数量有不同的实现方式。TOP关键字主要用于SQLServer和Access数据库中，而LIMIT子句则主要用于MySQL、PostgreSQL（通过LIMIT/OFFSET语法）、SQLite等数据库中。下面将分别详细介绍这两个功能的语法、语句以及案例。1.1、TOP子句（SQLServer和Access）1.1
  • 【从问题中去学习k8s】k8s中的常见面试题（夯实理论基础）（二十八） 向往风的男子 k8s学习kubernetes容器
    本站以分享各种运维经验和运维所需要的技能为主《python零基础入门》：python零基础入门学习《python运维脚本》：python运维脚本实践《shell》：shell学习《terraform》持续更新中：terraform_Aws学习零基础入门到最佳实战《k8》从问题中去学习k8s《docker学习》暂未更新《ceph学习》ceph日常问题解决分享《日志收集》ELK+各种中间件《运维日常》
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • 【Python基础】Python迭代器与生成器（两种强大工具） 姑苏老陈 Python编程入门python开发语言python迭代器与生成器
    本文收录于《Python编程入门》专栏，从零基础开始，分享一些Python编程基础知识，欢迎关注，谢谢！文章目录一、前言二、迭代器2.1创建迭代器2.2自定义迭代器2.3处理大型文件三、生成器四、生成器表达式五、实际应用案例5.1数据库查询5.2网络数据流处理六、总结一、前言在Python中，迭代器与生成器是两种非常强大的工具，它们可以帮助我们有效地处理大量数据，特别是在需要逐个访问元素的情况下。
  • 关于旗正规则引擎中的MD5加密问题 何必如此 jspMD5规则加密
    一般情况下，为了防止个人隐私的泄露，我们都会对用户登录密码进行加密，使数据库相应字段保存的是加密后的字符串，而非原始密码。 在旗正规则引擎中，通过外部调用，可以实现MD5的加密，具体步骤如下： 1.在对象库中选择外部调用，选择“com.flagleader.util.MD5”，在子选项中选择“com.flagleader.util.MD5.getMD5ofStr({arg1})”； 2.在规
  • 【Spark101】Scala Promise/Future在Spark中的应用 bit1129 Promise
    Promise和Future是Scala用于异步调用并实现结果汇集的并发原语，Scala的Future同JUC里面的Future接口含义相同，Promise理解起来就有些绕。等有时间了再仔细的研究下Promise和Future的语义以及应用场景，具体参见Scala在线文档：http://docs.scala-lang.org/sips/completed/futures-promises.html
  • spark sql 访问hive数据的配置详解 daizj spark sqlhivethriftserver
    spark sql 能够通过thriftserver 访问hive数据，默认spark编译的版本是不支持访问hive，因为hive依赖比较多，因此打的包中不包含hive和thriftserver,因此需要自己下载源码进行编译，将hive，thriftserver打包进去才能够访问，详细配置步骤如下：   1、下载源码   2、下载Maven,并配置 此配置简单，就略过
  • HTTP 协议通信 周凡杨 javahttpclienthttp通信
                            一：简介  HTTPCLIENT，通过JAVA基于HTTP协议进行点与点间的通信！     二： 代码举例      测试类： import java
  • java unix时间戳转换 g21121 java
    把java时间戳转换成unix时间戳： Timestamp appointTime=Timestamp.valueOf(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date())) SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd hh:m
  • web报表工具FineReport常用函数的用法总结（报表函数） 老A不折腾 web报表finereport总结
    说明：本次总结中，凡是以tableName或viewName作为参数因子的。函数在调用的时候均按照先从私有数据源中查找，然后再从公有数据源中查找的顺序。   CLASS CLASS(object):返回object对象的所属的类。   CNMONEY CNMONEY(number,unit)返回人民币大写。 number:需要转换的数值型的数。 unit:单位，
  • java jni调用c++ 代码 报错 墙头上一根草 javaC++jni
    # # A fatal error has been detected by the Java Runtime Environment: # #  EXCEPTION_ACCESS_VIOLATION (0xc0000005) at pc=0x00000000777c3290, pid=5632, tid=6656 # # JRE version: Java(TM) SE Ru
  • Spring中事件处理de小技巧 aijuans springSpring 教程Spring 实例Spring 入门Spring3
    Spring 中提供一些Aware相关de接口，BeanFactoryAware、 ApplicationContextAware、ResourceLoaderAware、ServletContextAware等等，其中最常用到de匙ApplicationContextAware.实现ApplicationContextAwaredeBean，在Bean被初始后，将会被注入 Applicati
  • linux shell ls脚本样例 annan211 linuxlinux ls源码linux 源码
    #! /bin/sh - #查找输入文件的路径 #在查找路径下寻找一个或多个原始文件或文件模式 # 查找路径由特定的环境变量所定义 #标准输出所产生的结果 通常是查找路径下找到的每个文件的第一个实体的完整路径 # 或是filename :not found 的标准错误输出。 #如果文件没有找到 则退出码为0 #否则 即为找不到的文件个数 #语法 pathfind [--
  • List,Set,Map遍历方式 (收集的资源,值得看一下) 百合不是茶 listsetMap遍历方式
    List特点：元素有放入顺序，元素可重复 Map特点：元素按键值对存储，无放入顺序 Set特点：元素无放入顺序，元素不可重复（注意：元素虽然无放入顺序，但是元素在set中的位置是有该元素的HashCode决定的，其位置其实是固定的） List接口有三个实现类：LinkedList，ArrayList，Vector LinkedList：底层基于链表实现，链表内存是散乱的，每一个元素存储本身
  • 解决SimpleDateFormat的线程不安全问题的方法 bijian1013 javathread线程安全
    在Java项目中，我们通常会自己写一个DateUtil类，处理日期和字符串的转换，如下所示： public class DateUtil01 { private SimpleDateFormat dateformat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); public void format(Date d
  • http请求测试实例（采用fastjson解析） bijian1013 http测试
            在实际开发中，我们经常会去做http请求的开发，下面则是如何请求的单元测试小实例，仅供参考。 import java.util.HashMap; import java.util.Map; import org.apache.commons.httpclient.HttpClient; import
  • 【RPC框架Hessian三】Hessian 异常处理 bit1129 hessian
    RPC异常处理概述   RPC异常处理指是，当客户端调用远端的服务，如果服务执行过程中发生异常，这个异常能否序列到客户端？   如果服务在执行过程中可能发生异常，那么在服务接口的声明中，就该声明该接口可能抛出的异常。   在Hessian中，服务器端发生异常，可以将异常信息从服务器端序列化到客户端，因为Exception本身是实现了Serializable的
  • 【日志分析】日志分析工具 bit1129 日志分析
    1. 网站日志实时分析工具 GoAccess http://www.vpsee.com/2014/02/a-real-time-web-log-analyzer-goaccess/ 2. 通过日志监控并收集 Java 应用程序性能数据(Perf4J) http://www.ibm.com/developerworks/cn/java/j-lo-logforperf/ 3.log.io 和
  • nginx优化加强战斗力及遇到的坑解决 ronin47 nginx 优化
    　　　先说遇到个坑，第一个是负载问题，这个问题与架构有关，由于我设计架构多了两层，结果导致会话负载只转向一个。解决这样的问题思路有两个：一是改变负载策略，二是更改架构设计。 　　　由于采用动静分离部署，而nginx又设计了静态，结果客户端去读nginx静态，访问量上来，页面加载很慢。解决：二者留其一。最好是保留apache服务器。   　　　来以下优化：   　　　
  • java-50-输入两棵二叉树A和B，判断树B是不是A的子结构 bylijinnan java
    思路来自： http://zhedahht.blog.163.com/blog/static/25411174201011445550396/ import ljn.help.*; public class HasSubtree { /**Q50. * 输入两棵二叉树A和B，判断树B是不是A的子结构。 例如，下图中的两棵树A和B，由于A中有一部分子树的结构和B是一
  • mongoDB 备份与恢复 开窍的石头 mongDB备份与恢复
    Mongodb导出与导入 1: 导入/导出可以操作的是本地的mongodb服务器,也可以是远程的. 所以,都有如下通用选项: -h host   主机 --port port    端口 -u username 用户名 -p passwd   密码 2: mongoexport 导出json格式的文件
  • [网络与通讯]椭圆轨道计算的一些问题 comsci 网络
         如果按照中国古代农历的历法，现在应该是某个季节的开始，但是由于农历历法是3000年前的天文观测数据，如果按照现在的天文学记录来进行修正的话，这个季节已经过去一段时间了。。。。。       也就是说，还要再等3000年。才有机会了，太阳系的行星的椭圆轨道受到外来天体的干扰，轨道次序发生了变
  • 软件专利如何申请 cuiyadll 软件专利申请
    软件技术可以申请软件著作权以保护软件源代码，也可以申请发明专利以保护软件流程中的步骤执行方式。专利保护的是软件解决问题的思想，而软件著作权保护的是软件代码（即软件思想的表达形式）。例如，离线传送文件，那发明专利保护是如何实现离线传送文件。基于相同的软件思想，但实现离线传送的程序代码有千千万万种，每种代码都可以享有各自的软件著作权。申请一个软件发明专利的代理费大概需要5000-8000申请发明专利可
  • Android学习笔记 darrenzhu android
    1.启动一个AVD 2.命令行运行adb shell可连接到AVD,这也就是命令行客户端 3.如何启动一个程序   am start -n package name/.activityName   am start -n com.example.helloworld/.MainActivity 启动Android设置工具的命令如下所示： # am start -
  • apache虚拟机配置，本地多域名访问本地网站 dcj3sjt126com apache
    现在假定你有两个目录，一个存在于 /htdocs/a，另一个存在于 /htdocs/b 。 现在你想要在本地测试的时候访问 www.freeman.com 对应的目录是 /xampp/htdocs/freeman ,访问 www.duchengjiu.com 对应的目录是 /htdocs/duchengjiu。 1、首先修改C盘WINDOWS\system32\drivers\etc目录下的
  • yii2 restful web服务[速率限制] dcj3sjt126com PHPyii2
    速率限制 为防止滥用，你应该考虑增加速率限制到您的API。 例如，您可以限制每个用户的API的使用是在10分钟内最多100次的API调用。 如果一个用户同一个时间段内太多的请求被接收， 将返回响应状态代码 429 (这意味着过多的请求)。 要启用速率限制, [[yii\web\User::identityClass|user identity class]] 应该实现 [[yii\filter
  • Hadoop2.5.2安装——单机模式 eksliang hadoophadoop单机部署
    转载请出自出处：http://eksliang.iteye.com/blog/2185414 一、概述        Hadoop有三种模式 单机模式、伪分布模式和完全分布模式，这里先简单介绍单机模式 ，默认情况下，Hadoop被配置成一个非分布式模式，独立运行JAVA进程，适合开始做调试工作。   二、下载地址 Hadoop 网址http:
  • LoadMoreListView+SwipeRefreshLayout（分页下拉）基本结构 gundumw100 android
    一切为了快速迭代 import java.util.ArrayList; import org.json.JSONObject; import android.animation.ObjectAnimator; import android.os.Bundle; import android.support.v4.widget.SwipeRefreshLayo
  • 三道简单的前端HTML/CSS题目 ini htmlWeb前端css题目
    使用CSS为多个网页进行相同风格的布局和外观设置时，为了方便对这些网页进行修改，最好使用（ ）。http://hovertree.com/shortanswer/bjae/7bd72acca3206862.htm   在HTML中加入<table style=”color:red; font-size:10pt”>，此为（ ）。http://hovertree.com/s
  • overrided方法编译错误 kane_xie override
    问题描述： 在实现类中的某一或某几个Override方法发生编译错误如下： Name clash: The method put(String) of type XXXServiceImpl has the same erasure as put(String) of type XXXService but does not override it   当去掉@Over
  • Java中使用代理IP获取网址内容（防IP被封，做数据爬虫） mcj8089 免费代理IP代理IP数据爬虫JAVA设置代理IP爬虫封IP
    推荐两个代理IP网站：   1. 全网代理IP：http://proxy.goubanjia.com/   2. 敲代码免费IP：http://ip.qiaodm.com/   Java语言有两种方式使用代理IP访问网址并获取内容，   方式一，设置System系统属性   // 设置代理IP System.getProper
  • Nodejs Express 报错之 listen EADDRINUSE qiaolevip 每天进步一点点学习永无止境nodejs纵观千象
    当你启动 nodejs服务报错： >node app Express server listening on port 80 events.js:85 throw er; // Unhandled 'error' event ^ Error: listen EADDRINUSE at exports._errnoException (
  • C++中三种new的用法 _荆棘鸟_ C++new
    转载自：http://news.ccidnet.com/art/32855/20100713/2114025_1.html 作者: mt 其一是new operator，也叫new表达式；其二是operator new，也叫new操作符。这两个英文名称起的也太绝了，很容易搞混，那就记中文名称吧。new表达式比较常见，也最常用，例如： string* ps = new string("
  • Ruby深入研究笔记1 wudixiaotie Ruby
    module是可以定义private方法的 module MTest def aaa puts "aaa" private_method end private def private_method puts "this is private_method" end end
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他