{"id":683,"date":"2019-02-14T01:14:38","date_gmt":"2019-02-13T17:14:38","guid":{"rendered":"https:\/\/vinta.ws\/code\/?p=683"},"modified":"2026-03-17T01:20:20","modified_gmt":"2026-03-16T17:20:20","slug":"write-next-generation-javascript-with-babel-7","status":"publish","type":"post","link":"https:\/\/vinta.ws\/code\/write-next-generation-javascript-with-babel-7.html","title":{"rendered":"Write next generation JavaScript with Babel 7"},"content":{"rendered":"

You write the next generation JavaScript code (ES6 or ES2018!) and use Babel to convert it to ES5. Even more, with the new @babel\/preset-env<\/code> module, it is able to intelligently convert your next generation ECMAScript code to compatible syntax based on browser compatibility statistics. So you don't have to target specific browser versions anymore!<\/p>\n

ref:
\nhttps:\/\/babeljs.io\/<\/a>
\nhttps:\/\/babeljs.io\/docs\/en\/babel-preset-env<\/a><\/p>\n

There is a real-world project with proper configurations. The following article is based on this project.
\nhttps:\/\/github.com\/vinta\/pangu.js<\/a><\/p>\n

Babel<\/h2>\n
$ npm install \n@babel\/core \n@babel\/cli \n@babel\/preset-env \n--save-dev<\/code><\/pre>\n
ref:
\nhttps:\/\/babeljs.io\/setup<\/a><\/p>\n
\/\/ babel.config.js\nmodule.exports = function(api) {\n    api.cache(false);\n    return {\n        presets: [\n            \"@babel\/preset-env\"\n        ],\n        comments: false\n    };\n};<\/code><\/pre>\n
ref:
\nhttps:\/\/babeljs.io\/docs\/en\/configuration<\/a><\/p>\n
It is also recommended to put common commands in the scripts<\/code> section of the package.json<\/code> file.<\/p>\n
\/\/ package.json\n{\n    ...\n    \"scripts\": {\n        \"clear:shared\": \"rm -rf .\/dist\/shared\/\",\n        \"clear:browser\": \"rm -rf .\/dist\/browser\/\",\n        \"clear:node\": \"rm -rf .\/dist\/node\/\",\n        \"clear\": \"npm run clear:shared && npm run clear:browser && npm run clear:node\",\n        \"build:shared\": \"npm run clear:shared && babel src\/shared\/ -d dist\/shared\/\",\n        \"build:browser\": \"npm run clear:browser && webpack\",\n        \"build:node\": \"npm run clear:node && babel src\/node\/ -d dist\/node\/\",\n        \"build\": \"npm run build:shared && npm run build:browser && npm run build:node\",\n    },\n    ...\n}<\/code><\/pre>\n
$ npm run build:node<\/code><\/pre>\n
ref:
\nhttps:\/\/babeljs.io\/docs\/en\/babel-cli\/<\/a><\/p>\n
Webpack<\/h2>\n
$ npm install \nwebpack \nwebpack-cli \nbabel-loader \nterser-webpack-plugin \n--save-dev<\/code><\/pre>\n
\/\/ webpack.config.js\nvar _ = require('underscore');\nvar fs = require('fs');\nvar path = require('path');\nvar TerserPlugin = require('terser-webpack-plugin');\nvar webpack = require('webpack');\n\nvar packageInfo = require('.\/package.json');\n\nvar entryPath = '.\/src\/browser\/pangu.js';\n\nmodule.exports = {\n  target: 'web',\n  \/\/ mode: 'development',\n  mode: 'production',\n  entry: {\n    'pangu': entryPath,\n    'pangu.min': entryPath\n  },\n  output: {\n    path: path.resolve(__dirname, 'dist\/browser\/'),\n    filename: '[name].js',\n    library: 'pangu',\n    libraryTarget: 'umd',\n    umdNamedDefine: true\n  },\n  module: {\n    rules: [\n      {\n        test: \/.js$\/,\n        exclude: \/node_modules|node\/,\n        use: {\n          loader: 'babel-loader',\n          options: {\n            babelrc: false,\n            presets: [\n              [\n                \"@babel\/preset-env\",\n                {\n                  \"modules\": \"umd\"\n                }\n              ]\n            ]\n          }\n        }\n      }\n    ]\n  },\n  devtool: false,\n  optimization: {\n    minimizer: [\n      new TerserPlugin({\n        include: \/.min.js$\/\n      })\n    ],\n  },\n}<\/code><\/pre>\n
ref:
\nhttps:\/\/webpack.js.org\/configuration\/<\/a><\/p>\n
@babel\/preset-env<\/code> transpiles your files to commonjs<\/code> by default, which requires the transpiled files to be included by require or import. To make this compatible with your Chrome extension, you need to transpile the files as umd<\/code> module.<\/p>\n
ref:
\nhttps:\/\/stackoverflow.com\/questions\/52929562\/babel-7-uncaught-referenceerror-after-transpiling-a-module<\/a><\/p>\n
$ nom run build:browser<\/code><\/pre>\n
Karma<\/h2>\n
$ npm install \n@babel\/register \nkarma-babel-preprocessor \nkarma-chrome-launcher \nkarma-coverage \nkarma-mocha \nkarma-mocha-reporter \npuppeteer \nchai \n--save-dev<\/code><\/pre>\n
\/\/ karma.conf.js\nmodule.exports = function(config) {\n  config.set({\n    frameworks: [\n      'mocha'\n    ],\n    browsers: [\n      'ChromeHeadless'\n    ],\n    files: [\n      'node_modules\/chai\/chai.js',\n      'dist\/browser\/pangu.js',\n      'test\/browser\/*.js',\n    ],\n    preprocessors: {\n        'dist\/browser\/pangu.js': ['coverage'],\n    },\n    reporters: [\n      'mocha',\n      'coverage'\n    ],\n    singleRun: true,\n    coverageReporter: {\n      type: 'lcov',\n      subdir: '.'\n    },\n  });\n};<\/code><\/pre>\n
ref:
\nhttps:\/\/karma-runner.github.io\/3.0\/config\/configuration-file.html<\/a><\/p>\n
$ nom run test:browser<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
With the new @babel\/preset-env module, it is able to intellectually convert your next generation ECMAScript code to compatible syntax based on browser compatibility statistics. So you don't have to target specific browser versions anymore!<\/p>\n","protected":false},"author":1,"featured_media":684,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,116],"tags":[11,12],"class_list":["post-683","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-about-javascript","category-about-web-development","tag-javascript","tag-node-js"],"_links":{"self":[{"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/posts\/683","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/comments?post=683"}],"version-history":[{"count":0,"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/posts\/683\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/media\/684"}],"wp:attachment":[{"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/media?parent=683"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/categories?post=683"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/tags?post=683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}