babel安装相关的

全局安装node后;

在新项目文件中;

先项目初始化(npm)

npm init

然后一路回车后;

npm install babel-cli –save-dev-g

看看是否安装成功

babel –V

//$ babel es6.js -o es5.js  //加上-o参数 可以将结果写入到指定的文件
//$ babel src -d lib //把一个目录整个编译成一个新的目录

(上面 –o 是 -out的缩写 ,写-d 是–out-dir的缩写)

如果频繁需要bind,把src文件,移动到build文件下面;可以配置到package中;

比如下面的build就是新增的;

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"./node_modules/.bin/babel src -d build"
}

运行的时候,只需要运行

npm run build

这样就可以吧文件变异到build里;

默认是不对文件进行任何处理的;

下面配置babel ES6的preset

npm install babel-preset-es2015 –save-dev

这样就可以安装好了;

再根目录下新建一个.babelrc 文件 (就是babel在当前项目的配置文件)

{
"presets": [
"es2015"
]
}

上面就是配置的预处理

然后再次

npm run build

这样就可以编译成功了;

不过每次这么写还是很蛋疼的;

可以做watch的;

在package里,多加一个 –w

"build": "./node_modules/.bin/babel src -wd build"

上面-w 就是watch的意思;

运行一次后,以后都是watch状态,不会再编译了;

不过ES6新增的API并不能直接转过去,需要借助babel-polyfill 这个来辅助下;

npm install --save babel-polyfill

polyfill 使用方法

polyfill不是插件也不是模块,用法和他们不一样,是直接引入就可以了

在JS顶部添加文件;

import "babel-polyfill";

如果想使用ES7等语法,用不同阶段的,可以引用对应预设(preset);

http://babeljs.io/docs/plugins/#stage-x-experimental-presets

编译 React

npm install babel-preset-react

然后在.babelrc里面去配置;

{
"presets": ["es2015","react"]
}

安装UMD格式的转换

http://babeljs.io/docs/plugins/transform-es2015-modules-umd/

npm install --save-dev babel-plugin-transform-es2015-modules-umd

普通模式的是下面的代码

"use strict";

var hello = function hello(a, b) {
return a + b;
};
console.log(hello(2, 33));

UMD后是下面这种的

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define([], factory);
} else if (typeof exports !== "undefined") {
factory();
} else {
var mod = {
exports: {}
};
factory();
global.test = mod.exports;
}
})(this, function () {
"use strict";

var hello = function hello(a, b) {
return a + b;
};
console.log(hello(2, 33));
});

umd是AMD和CommonJS的糅合

AMD 浏览器第一的原则发展 异步加载模块。

CommonJS 模块以服务器第一原则发展,选择同步加载,它的模块无需包装(unwrapped modules)。

这迫使人们又想出另一个更通用的模式UMD (Universal Module Definition)。希望解决跨平台的解决方案。

UMD先判断是否支持Node.js的模块(exports)是否存在,存在则使用Node.js模块模式。

在判断是否支持AMD(define是否存在),存在则使用AMD方式加载模块。

安装babel-runtime(精简React代码)

http://babeljs.io/docs/plugins/transform-runtime/

npm install --save-dev babel-plugin-transform-runtime

在runtime编译后的React下,会精简代码,把公用的文件提取出来;

~~

未经允许不得转载:朱邦邦的WEB前端开发博客 » babel安装相关的

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址