开发一个企业网站要多少钱,工商网企业信息查询系统上海,企业网站建设分析报告,百度知道小程序可以在我的GitHub上下载示例代码。
前言
之前一直想要系统的学习一下Babel的使用规则#xff0c;看过阮一峰老师的《Babel基础入门》#xff0c;无奈此教程是2016年出的#xff0c;而Babel 7都已经出来啦#xff0c;于是#xff0c;在搜集了各种资料后#xff0c;关于… 可以在我的GitHub上下载示例代码。
前言
之前一直想要系统的学习一下Babel的使用规则看过阮一峰老师的《Babel基础入门》无奈此教程是2016年出的而Babel 7都已经出来啦于是在搜集了各种资料后关于如何快速上手Babel我大概精简了以下步骤如有错误希望大家能指出来谢谢
使用指南
1.使用手册——Babel官网最好看着官网提示的步骤一点一点来
2.配置环境——创建项目文件babel-demo进入项目后 git bash然后输入 npm init -y然后项目文件就会出现配置文件package.json 3.下载相应的包
npm install --save-dev babel/core babel/cli babel/preset-env
npm install --save babel/polyfill或者简写npm install -D babel/core babel/cli babel/preset-env
npm install babel/polyfill
--save-dev(简写-D表示该版本只适用于开发环境中命令会自动帮你写在package.json的devDependencies中 --save或者不写则表示该版本适用于生产环境中命令会自动帮你写在package.json的dependencies中 注释先解释一下使用Babel前要下载的包的意义和用法
如下。
1). babel/cli是一个允许你从终端使用 babel 的工具。即用于命令行转码
基本用法如下。 # 转码结果输出到标准输出
$ babel example.js# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib# -s 参数生成source map文件
$ babel src -d lib -s 2). Babel 的核心功能在 babel/core模块如果某些代码需要调用Babel的API进行转码则就需要此模块。
用法如下
var babel require(babel/core);// 字符串转码
babel.transform(code();, options);
// { code, map, ast }// 文件转码异步
babel.transformFile(filename.js, options, function(err, result) {result; // { code, map, ast }
});// 文件转码同步
babel.transformFileSync(filename.js, options);
// { code, map, ast }// Babel AST转码
babel.transformFromAst(ast, code, options);
// { code, map, ast } 例子如下。
在src目录文件新建一个core.js文件输入如下
var es6Code let x n n 1;
var envCode require(babel/core).transform(es6Code, {presets: [babel/env]}).code;console.log(envCode); 之后在bash中输入
$ npx babel src -d dist
//npx如果不懂请自行上网搜寻
编译成功你会在目录里看到dist里面有已经编译好的core.js文件如下
use strict;var es6Code let x n n 1;var envCode require(babel/core).transform(es6Code, {presets: [babel/env]
}).code;console.log(envCode);
如果想看envCode的结果也可以在bash中输入
$ node src/core.js3). babel/polyfill 模块包括core-js和自定义regenerator runtime 来模拟完整的 ES2015 环境。
Babel默认只转换新的JavaScript句法syntax而不转换新的API比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象以及一些定义在全局对象上的方法比如Object.assign都不会转码。
举例来说ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行必须使用babel-polyfill为当前环境提供一个垫片。
4). babel/preset-env 根据你需要支持的环境配合targets中的浏览器信息自动决定适合你的 Babel 插件
4.使用以下内容在项目的根目录中创建名为 babel.config.js 的配置文件(配置文件很重要
module.exports function(api){api.cache(true)const presets [[babel/env, {targets: {ie:10,edge: 17,firefox: 60,chrome: 67,safari: 11.1},useBuiltIns: usage}]];const plugins [];return {presets,plugins}
}//target表示你想要支持的浏览器的最低型号
// useBuiltIns: usage ——由于polyfill包很臃肿Babel 的此设置将检查你的所有代码以查找目标环境中缺少的功能并仅包含所需的 polyfill。 5.开始使用 创建src文件夹再在里面创建index.js文件并输入
(x x * 2)(1) 并在bash里继续输出入
$ npx babel src -d dist
//npx如果不懂请自行上网搜寻 如果觉得每次都要输入 npx babel src -d dist 太长也可以 改写package.json文件
scripts: {test: echo \Error: no test specified\ exit 1,build:auto:npx babel src -d dist},
之后只需要在bash中输入
$ npm run build:auto结果如下顺利编译成功了
use strict;(function (x) {return x * 2;
})(1);
6.配置的其他方法
以上方法是用了babel.config.js来配置Babel
即
babel.config.js
babel.config.js在项目的根目录中创建一个使用以下内容调用的文件。
module.exports function (api) {api.cache(true);const presets [ ... ];const plugins [ ... ];return {presets,plugins};
}
查看babel.config.js文档以查看更多配置选项。
官网还有几种方法来配置
I. .babelrc
{presets: [...],plugins: [...]
}
.babelrc在项目中创建一个使用以下内容调用的文件。
II. package.json
或者您可以选择使用密钥.babelrc从内部指定配置如下所示package.json babel
{name: my-package,version: 1.0.0,babel: {presets: [ ... ],plugins: [ ... ],}
} III. .babelrc.js
配置.babelrc与之相同但您可以使用JavaScript编写它。
const presets [ ... ];
const plugins [ ... ];module.exports { presets, plugins };
你可以访问任何Node.js API例如基于流程环境的动态配置
const presets [ ... ];
const plugins [ ... ];if (process.env[ENV] prod) {plugins.push(...);
}module.exports { presets, plugins };
IV. 使用CLIbabel/cli
这里如果你明确知道自己需要的插件如箭头函数那么可以在bash先下载
npm install --save-dev babel/plugin-transform-arrow-functions
然后接着输入
babel --plugins babel/plugin-transform-arrow-functions src -d dist
即可
V. 使用APIbabel/core
require(babel/core).transform(code, {plugins: [babel/plugin-transform-arrow-functions]
}); 好的大概就是这样啦如果有任何问题可以在评论区指出谢谢大家
