Babel 深入学习与工程实践

Author: JohnApache

.gitignore copy

@@ -0,0 +1,4 @@
+node_modules/
+*/node_modules/
+dist/
+*/dist/

README.md

@@ -0,0 +1,31 @@
+const presets = [
+    [
+        "@babel/env",
+    ]
+]
+
+const plugins = [
+    [
+        "@babel/plugin-transform-runtime",
+        {
+            corejs: 3,
+        }
+    ]
+]
+
+const ignore = [
+    /^.+\.test\.js$/,
+    /^.+\.spec\.js$/,
+    'node_modules/**'
+]
+
+
+module.exports = { 
+    presets, 
+    plugins, ignore, 
+    inputSourceMap: true, 
+    sourceType: 'module', 
+    // compact: false, 
+    // minified: true, 
+    // comments: false
+}

babel.config.js

@@ -0,0 +1 @@
+node_modules/

examples/gulp/.gitignore

@@ -0,0 +1,22 @@
+const presets = [
+    '@babel/env',
+];
+
+const plugins = [
+    [
+        '@babel/plugin-transform-runtime',
+        {
+            corejs: 3,
+        }
+    ]
+];
+
+const ignore = [
+    'node_modules/**'
+];
+
+module.exports = {
+    presets,
+    plugins,
+    ignore,
+}

examples/gulp/babel.config.js

@@ -0,0 +1,25 @@
+import gulp from 'gulp';
+import babel from 'gulp-babel';
+import uglify from 'gulp-uglify';
+import del from 'del';
+
+const paths = {
+    scripts: {
+      src: 'src/**/*.js',
+      dest: 'dist/'
+    }
+};
+
+const clean = () => del([ 'dist' ]);
+
+const scripts = () => {
+    return gulp.src(paths.scripts.src, { sourcemaps: true })
+        .pipe(babel())
+        .pipe(uglify())
+        .pipe(gulp.dest(paths.scripts.dest));
+}
+
+const build = gulp.series(clean, gulp.parallel(scripts));
+
+export default build;
+

examples/gulp/dist/dependA.js

@@ -0,0 +1,28 @@
+{
+  "name": "gulp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "gulp"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.5.5",
+    "@babel/core": "^7.5.5",
+    "@babel/plugin-transform-runtime": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "@babel/register": "^7.5.5",
+    "del": "^5.0.0",
+    "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
+    "gulp-uglify": "^3.0.2"
+  },
+  "dependencies": {
+    "@babel/runtime-corejs3": "^7.5.5",
+    "lodash": "^4.17.15"
+  }
+}

examples/gulp/dist/dependB.js

@@ -0,0 +1,7 @@
+export const someA = () => {
+    console.log(Array.from('1233'));
+}
+
+export const otherA = () => {
+    console.log('otherA');
+}

examples/gulp/dist/index.js

@@ -0,0 +1,5 @@
+const someB = () => {
+    console.log('someB');
+}
+
+export default someB

examples/gulp/gulpfile.babel.js

@@ -0,0 +1,11 @@
+import {someA} from './dependA';
+import someB from './dependB';
+import _ from 'lodash';
+
+const a = [1,2,3].includes(3);
+const b = new Map();
+const c = new Set();
+console.log(a, b, c);
+someA();
+someB();
+_.join(['Hello', 'webpack'], ' ')