├── .gitignore
├── README.md
├── babel01
├── babel.config.js
├── main.js
└── package.json
├── babel02
├── babel.config.js
├── index.html
├── main.js
└── package.json
├── babel03
├── a.js
├── index.html
├── package.json
└── polyfill.js
├── babel04
├── a.js
├── index.html
└── package.json
├── babel05
├── a.js
├── index.html
└── package.json
├── babel06
├── a.js
├── index.html
├── package.json
├── polyfill.js
└── webpack.config.js
├── babel07
├── a.js
├── index.html
├── package.json
└── webpack.config.js
├── babel08
├── a.js
├── index.html
├── package.json
└── webpack.config.js
├── babel09
├── babel.config.js
├── main.js
└── package.json
├── babel10
├── babel.config.js
├── main.js
└── package.json
├── babel11
├── a.js
├── babel.config.js
└── package.json
├── babel12
├── a.js
├── babel.config.js
└── package.json
├── babel13
├── a.js
├── babel.config.js
└── package.json
├── babel13a
├── a.js
├── a2.js
├── babel.config.js
└── package.json
├── babel13b
├── a.js
├── babel.config.js
└── package.json
├── babel14
├── a.js
├── babel.config.js
└── package.json
└── babel16
├── index.js
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
3 | b.js
4 |
5 | package-lock.json
6 |
7 | yarn.lock
8 |
9 | compiled.js
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 这是[Babel教程 - 姜瑞涛的官方网站](https://www.jiangruitao.com/babel/)配套的代码。
2 |
3 | 在教程里转码命令大部分使用npx babel main.js -o compiled.js进行的，下载本项目代码后，除了可以用该命令进行转码，也可以在相应的例子文件夹下执行npm install命令安装npm包后，使用npm run dev进行转码。在package.json文件里，npm run dev指向了npx babel main.js -o compiled.js命令。
--------------------------------------------------------------------------------
/babel01/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ["@babel/env"],
3 | plugins: []
4 | }
--------------------------------------------------------------------------------
/babel01/main.js:
--------------------------------------------------------------------------------
1 | var fn = (num) => num + 2;
--------------------------------------------------------------------------------
/babel01/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "bable01",
3 | "version": "1.0.0",
4 | "description": "https://www.jiangruitao.com/babel/",
5 | "main": "index.js",
6 | "scripts": {
7 | "dev": "npx babel main.js -o compiled.js"
8 | },
9 | "keywords": [
10 | "babel-tutorial"
11 | ],
12 | "author": "jruit",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "@babel/cli": "^7.8.4",
16 | "@babel/core": "^7.9.0",
17 | "@babel/preset-env": "^7.9.0"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/babel02/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ["@babel/env"],
3 | plugins: []
4 | }
--------------------------------------------------------------------------------
/babel02/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Document
6 |
7 |
8 |
9 |
10 |
11 | 在低版本浏览器运行该文件控制台会报错
12 |
13 |
--------------------------------------------------------------------------------
/babel02/main.js:
--------------------------------------------------------------------------------
1 | var fn = (num) => num + 2;
2 | var promise = Promise.resolve('ok')
--------------------------------------------------------------------------------
/babel02/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "bable02",
3 | "version": "1.0.0",
4 | "description": "https://www.jiangruitao.com/babel/",
5 | "main": "index.js",
6 | "scripts": {
7 | "dev": "npx babel main.js -o compiled.js"
8 | },
9 | "keywords": [
10 | "babel-tutorial"
11 | ],
12 | "author": "jruit",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "@babel/cli": "^7.8.4",
16 | "@babel/core": "^7.9.0",
17 | "@babel/preset-env": "^7.9.0"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/babel03/a.js:
--------------------------------------------------------------------------------
1 | // import './polyfill.js';
2 |
3 | var promise = Promise.resolve('ok');
4 | console.log(promise);
--------------------------------------------------------------------------------
/babel03/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Document
6 |
7 |
8 |
9 |
10 |
11 | 使用a.js会在低版本浏览器运行该文件控制台会报错
12 |
13 |
--------------------------------------------------------------------------------
/babel03/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "babel03",
3 | "version": "1.0.0",
4 | "description": "https://www.jiangruitao.com/babel/",
5 | "main": "index.js",
6 | "keywords": [
7 | "babel-tutorial"
8 | ],
9 | "scripts": {
10 | "dev": "npx webpack a.js -o b.js"
11 | },
12 | "author": "jruit",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "webpack": "^4.43.0",
16 | "webpack-cli": "^3.3.11"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/babel04/a.js:
--------------------------------------------------------------------------------
1 | // import '@babel/polyfill';
2 |
3 | var promise = Promise.resolve('ok');
4 | console.log(promise);
--------------------------------------------------------------------------------
/babel04/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Document
6 |
7 |
8 |
9 |
10 |
11 | 使用a.js会在低版本浏览器运行该文件控制台会报错
12 |
13 |
--------------------------------------------------------------------------------
/babel04/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "babel04",
3 | "version": "1.0.0",
4 | "description": "https://www.jiangruitao.com/babel/",
5 | "main": "index.js",
6 | "keywords": [
7 | "babel-tutorial"
8 | ],
9 | "scripts": {
10 | "dev": "npx webpack a.js -o b.js"
11 | },
12 | "author": "jruit",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "webpack": "^4.43.0",
16 | "webpack-cli": "^3.3.11"
17 | },
18 | "dependencies": {
19 | "@babel/polyfill": "^7.8.7"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/babel05/a.js:
--------------------------------------------------------------------------------
1 | // import "core-js/stable";
2 | // import "regenerator-runtime/runtime";
3 |
4 | var promise = Promise.resolve('ok');
5 | console.log(promise);
--------------------------------------------------------------------------------
/babel05/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Document
6 |
7 |
8 |
9 |
10 |
11 | 使用a.js会在低版本浏览器运行该文件控制台会报错
12 |
13 |
--------------------------------------------------------------------------------
/babel05/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "babel05",
3 | "version": "1.0.0",
4 | "description": "https://www.jiangruitao.com/babel/",
5 | "main": "index.js",
6 | "keywords": [
7 | "babel-tutorial"
8 | ],
9 | "scripts": {
10 | "dev": "npx webpack a.js -o b.js"
11 | },
12 | "author": "jruit",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "webpack": "^4.43.0",
16 | "webpack-cli": "^3.3.11"
17 | },
18 | "dependencies": {
19 | "core-js": "^3.6.5",
20 | "regenerator-runtime": "^0.13.5"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/babel06/a.js:
--------------------------------------------------------------------------------
1 |
2 | var promise = Promise.resolve('ok');
3 | console.log(promise);
--------------------------------------------------------------------------------
/babel06/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Document
6 |
7 |
8 |
9 |
10 | 入口entry里无polyfill的话，使用b.js会在低版本浏览器运行该文件控制台会报错
11 |
12 |
--------------------------------------------------------------------------------
/babel06/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "babel06",
3 | "version": "1.0.0",
4 | "description": "https://www.jiangruitao.com/babel/",
5 | "main": "index.js",
6 | "keywords": [
7 | "babel-tutorial"
8 | ],
9 | "scripts": {
10 | "dev": "npx webpack"
11 | },
12 | "author": "jruit",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "webpack": "^4.43.0",
16 | "webpack-cli": "^3.3.11"
17 | },
18 | "dependencies": {}
19 | }
20 |
--------------------------------------------------------------------------------
/babel06/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = {
4 | entry: ['./polyfill.js', './a.js'],
5 | output: {
6 | filename: 'b.js',
7 | path: path.resolve(__dirname, '')
8 | },
9 | mode: 'development'
10 | };
--------------------------------------------------------------------------------
/babel07/a.js:
--------------------------------------------------------------------------------
1 |
2 | var promise = Promise.resolve('ok');
3 | console.log(promise);
--------------------------------------------------------------------------------
/babel07/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Document
6 |
7 |
8 |
9 | 入口entry里无polyfill的话，使用b.js会在低版本浏览器运行该文件控制台会报错
10 |
11 |
--------------------------------------------------------------------------------
/babel07/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "babel07",
3 | "version": "1.0.0",
4 | "description": "https://www.jiangruitao.com/babel/",
5 | "main": "index.js",
6 | "keywords": [
7 | "babel-tutorial"
8 | ],
9 | "scripts": {
10 | "dev": "npx webpack"
11 | },
12 | "author": "jruit",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "webpack": "^4.43.0",
16 | "webpack-cli": "^3.3.11"
17 | },
18 | "dependencies": {
19 | "@babel/polyfill": "^7.8.7"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/babel07/webpack.config.js:
--------------------------------------------------------------------------------
1 |
2 | const path = require('path');
3 |
4 | module.exports = {
5 | entry: ['@babel/polyfill', './a.js'],
6 | output: {
7 | filename: 'b.js',
8 | path: path.resolve(__dirname, '')
9 | },
10 | mode: 'development'
11 | };
--------------------------------------------------------------------------------
/babel08/a.js:
--------------------------------------------------------------------------------
1 |
2 | var promise = Promise.resolve('ok');
3 | console.log(promise);
--------------------------------------------------------------------------------
/babel08/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Document
6 |
7 |
8 |
9 |
10 | 入口entry里无polyfill的子包的话，使用b.js会在低版本浏览器运行该文件控制台会报错
11 |
12 |
--------------------------------------------------------------------------------
/babel08/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "babel08",
3 | "version": "1.0.0",
4 | "description": "https://www.jiangruitao.com/babel/",
5 | "main": "index.js",
6 | "keywords": [
7 | "babel-tutorial"
8 | ],
9 | "scripts": {
10 | "dev": "npx webpack"
11 | },
12 | "author": "jruit",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "webpack": "^4.43.0",
16 | "webpack-cli": "^3.3.11"
17 | },
18 | "dependencies": {
19 | "core-js": "^3.6.5",
20 | "regenerator-runtime": "^0.13.5"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/babel08/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = {
4 | entry: ['core-js/stable', 'regenerator-runtime/runtime', './a.js'],
5 | output: {
6 | filename: 'b.js',
7 | path: path.resolve(__dirname, '')
8 | },
9 | mode: 'development'
10 | };
--------------------------------------------------------------------------------
/babel09/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ["@babel/env"],
3 | plugins: []
4 | }
--------------------------------------------------------------------------------
/babel09/main.js:
--------------------------------------------------------------------------------
1 | var fn = (num) => num + 2;
--------------------------------------------------------------------------------
/babel09/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "bable09",
3 | "version": "1.0.0",
4 | "description": "https://www.jiangruitao.com/babel/",
5 | "main": "index.js",
6 | "scripts": {
7 | "dev": "npx babel main.js -o compiled.js"
8 | },
9 | "keywords": [
10 | "babel-tutorial"
11 | ],
12 | "author": "jruit",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "@babel/cli": "^7.8.4",
16 | "@babel/core": "^7.9.0",
17 | "@babel/preset-env": "^7.9.0"
18 | },
19 | "browserslist": [
20 | "chrome 60"
21 | ]
22 | }
23 |
--------------------------------------------------------------------------------
/babel10/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ["@babel/env"],
3 | plugins: []
4 | }
--------------------------------------------------------------------------------
/babel10/main.js:
--------------------------------------------------------------------------------
1 | var fn = (num) => num + 2;
--------------------------------------------------------------------------------
/babel10/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "bable10",
3 | "version": "1.0.0",
4 | "description": "https://www.jiangruitao.com/babel/",
5 | "main": "index.js",
6 | "scripts": {
7 | "dev": "npx babel main.js -o compiled.js"
8 | },
9 | "keywords": [
10 | "babel-tutorial"
11 | ],
12 | "author": "jruit",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "@babel/cli": "^7.8.4",
16 | "@babel/core": "^7.9.0",
17 | "@babel/preset-env": "^7.9.0"
18 | },
19 | "browserslist": [
20 | "chrome 38"
21 | ]
22 | }
23 |
--------------------------------------------------------------------------------
/babel11/a.js:
--------------------------------------------------------------------------------
1 | import '@babel/polyfill';
2 |
3 | var promise = Promise.resolve('ok');
4 | console.log(promise);
--------------------------------------------------------------------------------
/babel11/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [["@babel/env", {
3 | useBuiltIns: "entry"
4 | }]],
5 | plugins: []
6 | }
--------------------------------------------------------------------------------
/babel11/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "babel11",
3 | "version": "1.0.0",
4 | "description": "https://www.jiangruitao.com/babel/",
5 | "main": "index.js",
6 | "keywords": [
7 | "babel-tutorial"
8 | ],
9 | "scripts": {
10 | "dev": "npx babel a.js -o b.js"
11 | },
12 | "author": "jruit",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "@babel/cli": "^7.8.4",
16 | "@babel/core": "^7.9.0",
17 | "@babel/preset-env": "^7.9.0"
18 | },
19 | "browserslist": [
20 | "firefox 58"
21 | ],
22 | "dependencies": {
23 | "@babel/polyfill": "^7.8.7"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/babel12/a.js:
--------------------------------------------------------------------------------
1 | var promise = Promise.resolve('ok');
2 | console.log(promise);
--------------------------------------------------------------------------------
/babel12/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [["@babel/env", {
3 | useBuiltIns: "usage"
4 | }]],
5 | plugins: []
6 | }
--------------------------------------------------------------------------------
/babel12/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "babel12",
3 | "version": "1.0.0",
4 | "description": "https://www.jiangruitao.com/babel/",
5 | "main": "index.js",
6 | "keywords": [
7 | "babel-tutorial"
8 | ],
9 | "scripts": {
10 | "dev": "npx babel a.js -o b.js"
11 | },
12 | "author": "jruit",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "@babel/cli": "^7.8.4",
16 | "@babel/core": "^7.9.0",
17 | "@babel/preset-env": "^7.9.0"
18 | },
19 | "browserslist": [
20 | "firefox 27"
21 | ],
22 | "dependencies": {
23 | "@babel/polyfill": "^7.8.7"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/babel13/a.js:
--------------------------------------------------------------------------------
1 | class Person {
2 | sayname() {
3 | return 'name'
4 | }
5 | }
6 |
7 | var john = new Person()
8 | console.log(john)
--------------------------------------------------------------------------------
/babel13/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ["@babel/env"],
3 | plugins: []
4 | }
--------------------------------------------------------------------------------
/babel13/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "babel13",
3 | "version": "1.0.0",
4 | "description": "https://www.jiangruitao.com/babel/",
5 | "main": "index.js",
6 | "keywords": [
7 | "babel-tutorial"
8 | ],
9 | "scripts": {
10 | "dev": "npx babel a.js -o b.js"
11 | },
12 | "author": "jruit",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "@babel/cli": "^7.8.4",
16 | "@babel/core": "^7.9.0",
17 | "@babel/preset-env": "^7.9.0"
18 | },
19 | "dependencies": {}
20 | }
21 |
--------------------------------------------------------------------------------
/babel13a/a.js:
--------------------------------------------------------------------------------
1 | // 这个例子不是用来运行的。a2.js是手动引入包后的代码，不是命令生成的。
2 | class Person {
3 | sayname() {
4 | return 'name'
5 | }
6 | }
7 |
8 | var john = new Person()
9 | console.log(john)
--------------------------------------------------------------------------------
/babel13a/a2.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var _classCallCheck = require("@babel/runtime/helpers/classCallCheck");
4 | var _defineProperties = require("@babel/runtime/helpers/defineProperties");
5 | var _createClass = require("@babel/runtime/helpers/createClass");
6 |
7 | var Person = /*#__PURE__*/function () {
8 | function Person() {
9 | _classCallCheck(this, Person);
10 | }
11 |
12 | _createClass(Person, [{
13 | key: "sayname",
14 | value: function sayname() {
15 | return 'name';
16 | }
17 | }]);
18 |
19 | return Person;
20 | }();
21 |
22 | var john = new Person();
23 | console.log(john);
--------------------------------------------------------------------------------
/babel13a/babel.config.js:
--------------------------------------------------------------------------------
1 | // 这个例子不是用来运行的。a2.js是手动引入包后的代码，不是命令生成的。
2 | module.exports = {
3 | presets: ["@babel/env"],
4 | plugins: []
5 | }
--------------------------------------------------------------------------------
/babel13a/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "babel13a",
3 | "version": "1.0.0",
4 | "description": "https://www.jiangruitao.com/babel/",
5 | "main": "index.js",
6 | "keywords": [
7 | "babel-tutorial"
8 | ],
9 | "scripts": {},
10 | "author": "jruit",
11 | "license": "ISC",
12 | "devDependencies": {
13 | "@babel/cli": "^7.8.4",
14 | "@babel/core": "^7.9.0",
15 | "@babel/preset-env": "^7.9.0"
16 | },
17 | "dependencies": {
18 | "@babel/runtime": "^7.9.6"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/babel13b/a.js:
--------------------------------------------------------------------------------
1 | class Person {
2 | sayname() {
3 | return 'name'
4 | }
5 | }
6 |
7 | var john = new Person()
8 | console.log(john)
--------------------------------------------------------------------------------
/babel13b/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ["@babel/env"],
3 | plugins: ["@babel/plugin-transform-runtime"]
4 | }
--------------------------------------------------------------------------------
/babel13b/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "babel13b",
3 | "version": "1.0.0",
4 | "description": "https://www.jiangruitao.com/babel/",
5 | "main": "index.js",
6 | "keywords": [
7 | "babel-tutorial"
8 | ],
9 | "scripts": {
10 | "dev": "npx babel a.js -o b.js"
11 | },
12 | "author": "jruit",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "@babel/cli": "^7.8.4",
16 | "@babel/core": "^7.9.6",
17 | "@babel/plugin-transform-runtime": "^7.9.6",
18 | "@babel/preset-env": "^7.9.6"
19 | },
20 | "dependencies": {
21 | "@babel/runtime": "^7.9.6"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/babel14/a.js:
--------------------------------------------------------------------------------
1 | var obj = Promise.resolve();
--------------------------------------------------------------------------------
/babel14/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ["@babel/env"],
3 | plugins: [
4 | ["@babel/plugin-transform-runtime", {
5 | "corejs": 3
6 | }]
7 | ]
8 | }
--------------------------------------------------------------------------------
/babel14/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "babel14",
3 | "version": "1.0.0",
4 | "description": "https://www.jiangruitao.com/babel/",
5 | "main": "index.js",
6 | "keywords": [
7 | "babel-tutorial"
8 | ],
9 | "scripts": {
10 | "dev": "npx babel a.js -o b.js"
11 | },
12 | "author": "jruit",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "@babel/cli": "^7.8.4",
16 | "@babel/core": "^7.9.6",
17 | "@babel/plugin-transform-runtime": "^7.9.6",
18 | "@babel/preset-env": "^7.9.6"
19 | },
20 | "dependencies": {
21 | "@babel/runtime-corejs3": "^7.10.4"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/babel16/index.js:
--------------------------------------------------------------------------------
1 | var babelCore = require("@babel/core");
2 | var es6Code = 'var fn = (num) => num + 2';
3 | var options = {
4 | presets: ["@babel/env"]
5 | };
6 | var result = babelCore.transform(es6Code, options);
7 | console.log(result);
8 | console.log('--------------');
9 | console.log('--------------');
10 | console.log(result.code);
11 |
--------------------------------------------------------------------------------
/babel16/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "bable16",
3 | "version": "1.0.0",
4 | "description": "https://www.jiangruitao.com/babel/",
5 | "main": "index.js",
6 | "scripts": {},
7 | "keywords": [
8 | "babel-tutorial"
9 | ],
10 | "author": "jruit",
11 | "license": "ISC",
12 | "devDependencies": {
13 | "@babel/core": "^7.9.6",
14 | "@babel/preset-env": "^7.9.0"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------