{"id":21900292,"url":"https://github.com/cryptoc1/es6-getting-started","last_synced_at":"2026-04-08T11:32:27.278Z","repository":{"id":82170111,"uuid":"97660465","full_name":"Cryptoc1/es6-getting-started","owner":"Cryptoc1","description":null,"archived":false,"fork":false,"pushed_at":"2017-07-19T17:04:20.000Z","size":180,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-03T16:26:15.095Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Cryptoc1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-19T01:43:35.000Z","updated_at":"2017-07-19T01:48:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"3460d5a5-a5f5-4fe6-bd5c-094e0803d581","html_url":"https://github.com/Cryptoc1/es6-getting-started","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Cryptoc1/es6-getting-started","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cryptoc1%2Fes6-getting-started","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cryptoc1%2Fes6-getting-started/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cryptoc1%2Fes6-getting-started/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cryptoc1%2Fes6-getting-started/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Cryptoc1","download_url":"https://codeload.github.com/Cryptoc1/es6-getting-started/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cryptoc1%2Fes6-getting-started/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31554091,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T10:21:54.569Z","status":"ssl_error","status_checked_at":"2026-04-08T10:21:38.171Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-28T15:07:12.370Z","updated_at":"2026-04-08T11:32:27.250Z","avatar_url":"https://github.com/Cryptoc1.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Getting Started with ES6\n\nThis repo is aimed at providing a simple tutorial to help those start using ES6 with webpack/babel WITHOUT React or Angular. A misconception I sometimes feel when reading, or following other tutorials is that the authors assume that the developer's instentions in using webpack/babel/ES6 is to do React or Angular development. This is, however, inaccurate. Although webpack/babel are powerful tools that make React/Angular development easier, they are still framework agnositic, making it easy to write dependable, vanilla, ES6 JavaScript.\n\n## Assumptions \n\nThis tutorial assumes the following:\n+ You are using a Unix/bash-like command line\n+ You already have `node`/`npm` installed globally\n+ Minimal experience with `gulp`\n\n## Configuring the Envirnoment\n\nThe intention of this tutorial is to use the repo as a reference as you create your own project to duplicate the code within this repo. With that in mind, let's get started!\n\n  _Note_: You'll need to run `npm install` in this repo if you wish to work side-by-side, as the repo does not include any `node_modules`\n\nStart by creating your project workspace.\n\n  `$ mkdir es6-getting-started; cd es6-getting-started`\n\nNow, let's initialize our workspace with `npm`.\n\n  `$ npm init`\n\nNext is to start defining our workspace structure. Our tree should look like the following:\n\n  ```\n  .\n  +-- src/\n  |   +-- app/          # JavaScript sources will live here\n  |   +-- assets/       # StyleSheets, fonts, and images live in here\n  |   +-- dist/         # Our compiled JavaScript source, and StyleSheets will live here\n  +-- package.json\n  +-- README.md\n  ```\n\n### Configuring `webpack`\n\nTo start, create the file `webpack.config.js` in the workspace root.\n\n  `$ touch webpack.config.js`\n\nBefore defining our configuration, we need to install the dependencies required to get webpack working.\n\n  `$ npm install --save-dev webpack babel-cli babel-loader babel-preset-es2015 babel-preset-stage-0 babel-polyfill`\n\n  _Hint_: You can use `-D` instead `--save-dev`\n  _Hint_: You can use `i` instead `install`\n\nThe webpack configuration is a node module that webpack will import when it runs. This makes webpack plugins, and loaders can easily be managed using `npm`. As such, we define our configuration as a simple object, that gets exported.\n\n  ```javascript\n    const APP_DIR = './src/app'\n    const BUILD_DIR = './src/dist'\n\n    // https://webpack.js.org/concepts/configuration/\n    const config = {\n      // Generate *.map files for the compiled JavaScript, this makes debugging easier\n      devtool: 'source-map',\n      // Our app starts at index.js\n      entry: `${APP_DIR}/index.js`,\n      module: {\n        // Define loaders to handle the manipulation of the code\n        loaders: [\n          {\n            // Tell babel to ignore files imported from node modules\n            exclude: /node_modules/,\n            // Tell babel to load files from our app directory\n            include: APP_DIR,\n            loader: 'babel-loader',\n            options: {\n              // presets tell babel what to do to our code\n              // the `es2015` preset tells babel that we want to transform our ES6 -\u003e ES5 (https://babeljs.io/docs/plugins/preset-es2015/)\n              // the `stage-0` preset tells babel to insert _runtime_ code (polyfills) that change how built-in functions work to meet the ES6 spec (https://babeljs.io/docs/plugins/preset-stage-0/)\n              presets: ['es2015', 'stage-0']\n            },\n            // Tell babel that it should transform (\"load\") any files that have a `.js` extension\n            test: /\\.js?/\n          }\n        ]\n      },\n      output: {\n        // Save the compiled javascript to `bundle.min.js`\n        filename: 'bundle.min.js',\n        // Save to ./app/dist\n        path: BUILD_DIR\n      },\n      plugins: [\n        // Minify + mangle the compiled code\n        // enabling this plugin we prevent webpack from generating your source-maps, so it's disabled for development\n        // new webpack.optimize.UglifyJsPlugin()\n      ],\n      // Tell webpack that we are writing code for a browser\n      target: 'web'\n    }\n\n    // Export the configuration\n    module.exports = config\n  ```\n\n### Configuring `gulp`\n\nThis project uses gulp to compile SASS to a minified StyleSheet.\n\nBegin by installing depenedencies:\n\n  `$ npm i -D gulp gulp-concat gulp-minify-css gulp-sass del`\n\n  _Hint_: You can configure gulp to run your webpack build also, using [`gulp-stream`](https://github.com/shama/webpack-stream)\n\nNext, create `gulpfile.js` in the root of the workspace.\n\n  `$ touch gulpfile.js`\n\n Since this project only uses `gulp` to compile StyleSheets, the gulpfile is quite minimal.\n\n  ```javascript\n    const concat = require('gulp-concat')\n    const del = require('del')\n    const gulp = require('gulp')\n    const minifyCSS = require('gulp-minify-css')\n    const sass = require('gulp-sass')\n\n    const config = {\n      // Our stylesheet sources exist in the `./assets` folder\n      css: [\n        // include SASS files\n        'src/assets/**/*.scss',\n        // Also include CSS files\n        'src/assets/**/*.css'\n      ]\n    }\n    \n    // Define output for compiled StyleSheets\n    config.css.output = 'src/dist'\n\n    // This task deletes existing compiled stylesheets\n    gulp.task('clean-css', () =\u003e del(['src/app/dist/**/*.min.css']))\n\n    // This task compiles and minifies our StyleSheets\n    gulp.task('css', ['clean-css'], () =\u003e {\n      return gulp.src(config.css)\n        // Compile SASS source\n        .pipe(sass().on('error', sass.logError))\n        // Concat compiled sources into a single StyleSheet\n        .pipe(concat('styles.min.css'))\n        // Minify the final StyleSheet\n        .pipe(minifyCSS())\n        // Write to the desired destination\n        .pipe(gulp.dest(config.css.output))\n    })\n\n    // This task watches for changes to StyleSheets, and runs `css`\n    gulp.task('watch-css', ['css'], () =\u003e gulp.watch(config.css, ['css']))\n  ```\n\n### Configuring `npm` as a Task Runner\n\nIf you've used Visual Studio before, you may have used the Task Runner to manage your gulp tasks before. For this project, we use `npm` to run tasks. The advantage of using `npm` is that you can send arguments to the script being run. All the tasks we define will execute node scripts from packages we installed previously (`gulp`, and `webpack`). Although the scripts we run can be installed globally for these tools, we prefer to reference the scripts directly from `node_modules/`, becuase it makes the task running independent of the developer having node properly configured globally.\n\nFor example, `gulp` can be installed globally using `npm install -g gulp`, and our gulp task could look like:\n\n  ```javascript\n    \"scripts\": {\n      \"gulp\": \"gulp\",\n      \"watch-css\": \"gulp watch-css\"\n    }\n  ```\n\nHowever, in some enviroments (i.e.: Windows), `node` may not be properly configured, causing `$ gulp watch-css` to not run.\n\nMore info about ensuring node packages can be run globally can be found, [here](https://stackoverflow.com/a/5926706). \n\nOpen `package.json` and the `scripts` section (if the section doesn't exist, you can create it).\n\nThe first task we define we allow us to run gulp from the `node_modules/` folder (locally).\n\n  ```javascript\n    \"scripts\": {\n      \"gulp\": \"node node_modules/gulp/bin/gulp.js\"\n    }\n  ```\n\nYou can now run this task using `npm`:\n\n  `$ npm run gulp [\u003cGULP_ARGS\u003e]`\n\nOr, with arguments:\n\n  `$ npm run gulp clean-css`\n\nThe next task we'll define will run the `watch-css` task from our gulp configuration.\n\n  ```javascript\n    \"scripts\": {\n      \"gulp\": \"node node_modules/gulp/bin/gulp.js\",\n      \"watch-css\": \"npm run gulp watch-css\"\n    }\n  ```\n\nAs you can see, this task just runs our `gulp` task, with an argument for `gulp` to run the `watch-css` task.\n\nFinally, we'll define tasks for `webpack`. One task that will compile our JavaScript sources, and another to watch, and compile our JavaScript sources.\n\n  ```javascript\n    \"scripts\": {\n      \"gulp\": \"node node_modules/gulp/bin/gulp.js\",\n      \"watch-css\": \"npm run gulp watch-css\",\n      \"webpack\": \"node node_modules/webpack/bin/webpack.js --colors --progress\",\n      \"webpack-watch\": \"node node_modules/webpack/bin/webpack.js --colors --progress --watch\"\n    }\n  ```\n\nNow the workspace structure is defined, webpack and gulp are configured, and the dependencies installed, we're ready to start writing some ES6 JavaScript.\n\n## The Code\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcryptoc1%2Fes6-getting-started","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcryptoc1%2Fes6-getting-started","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcryptoc1%2Fes6-getting-started/lists"}