BabelJS - 使用Babel和Webpack

Webpack是一个模块捆绑器，它将所有具有依赖关系的模块(js，样式，图像等)打包到静态资源.js，.css，.jpg，.png等中.Webpack带有预设，有助于编译到要求的形式.例如，反应预设有助于以反应形式获得最终输出，es2015或env预设有助于编译ES5或6或7中的代码等.我们在项目设置中使用了babel 6.如果你想切换到babel7，使用@ babel/babel-package-name安装所需的babel包.

在这里，我们将讨论使用babel和webpack的项目设置.创建一个名为 的文件夹，并在visual studio IDE中打开它.

要创建项目设置，请运行npm initbabelwebpack，如下所示 :

这是在npm init之后创建的package.json;

现在，我们将安装我们需要与babel一起工作的必要软件包和webpack.

 npm install --save-dev webpack  npm install --save-dev webpack-dev-server  npm install --save-dev babel-core  npm install --save-dev babel-loader  npm install --save-dev babel-preset-env

这是安装后的Package.json :

现在，我们将创建一个webpack.config.js文件，它将具有捆绑js文件的所有细节.这些文件将使用babel编译成es5.

要使用服务器运行webpack，我们使用webpack-server.以下是添加到它的详细信息 :

我们添加了将启动webpack-dev-server的publish命令，并将更新存储最终文件的路径.现在我们用来更新最终文件的路径是/dev文件夹.

要使用webpack，我们需要运行以下命令 :

npm run publish

首先我们需要创建webpack.config.js文件.这些将具有webpack的配置细节.

文件中的详细信息如下 :

var path = require('path');module.exports = {   entry: {      app: './src/main.js'   },   output: {      path: path.resolve(__dirname, 'dev'),      filename: 'main_bundle.js'   },   mode:'development',   module: {      rules: [         {            test: /\.js$/,            include: path.resolve(__dirname, 'src'),            loader: 'babel-loader',            query: {               presets: ['env']            }         }      ]   }};

文件的结构如上所示.它以theh路径开始，它给出当前路径的详细信息.

var path = require('path');//给出当前路径

接下来是module.exports对象，它有属性入口，输出和模块.该条目是起点.在这里，我们需要给出必须编译的主要js文件.

entry: {   app: './src/main.js'},

path.resolve(_dirname，'src/main.js') - 将查找目录中的src文件夹和该文件夹中的main.js.

输出

output: {   path: path.resolve(__dirname, 'dev'),   filename: 'main_bundle.js'},

输出是一个包含路径和文件名详细信息的对象. Path将保存将保存编译文件的文件夹，filename将告诉您.html文件中使用的最终文件的名称.

module

module: {   rules: [      {         test: /\.js$/,         include: path.resolve(__dirname, 'src'),         loader: 'babel-loader',         query: {            presets: ['env']         }      }   ]}

• 模块是一个对象，详细信息为规则.它具有以下属性 :

• test

• include

• loader

• 查询

• 测试将保存以.js结尾的所有js文件的详细信息.它有一个模式，它将在给定的入口点的末尾查找.js.

• 包含指示文件夹使用要查看的文件.

• Loader 使用babel-loader编译代码.

• 查询具有属性预设，这是一个值为env-es5或es6或es7的数组.

在其中创建文件夹src和 main.js ;在ES6中编写你的js代码.稍后，运行命令以使用webpack和babel将其编译为es5.

src/main.js

let add = (a,b) => {   return a+b;};let c = add(10, 20);console.log(c);

运行命令 :

npm run pack

编译后的文件如下所示;

dev/main_bundle.js

!function(e) {   var t = {};   function r(n) {      if(t[n])return t[n].exports;var o = t[n] = {i:n,l:!1,exports:{}};      return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports   }   r.m = e,r.c = t,r.d = function(e,t,n) {      r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})   },   r.r = function(e) {      "undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})   },   r.t = function(e,t) {      if(1&t&&(e = r(e)),8&t)return e;      if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;      var n = Object.create(null);      if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t) {return e[t]}.bind(null,o));      return n   },   r.n = function(e) {      var t = e&&e.__esModule?function() {return e.default}:function() {return e};      return r.d(t,"a",t),t   },   r.o = function(e,t) {return Object.prototype.hasOwnProperty.call(e,t)},   r.p = "",r(r.s = 0)}([function(e,t,r) {"use strict";var n = function(e,t) {return e+t}(10,20);console.log(n)}]);!function(e) {   var t = {};   function r(n) {      if(t[n])return t[n].exports;      var o = t[n] = {i:n,l:!1,exports:{}};      return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports   }   r.m = e,r.c = t,r.d = function(e,t,n) {      r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})   },   r.r = function(e) {      "undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})   },   r.t = function(e,t) {      if(1&t&&(e=r(e)),      8&t)return e;      if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;      var n = Object.create(null);      if(         r.r(n),         Object.defineProperty(n,"default",{enumerable:!0,value:e}),         2&t&&"string"!=typeof e      )      for(var o in e)r.d(n,o,function(t) {return e[t]}.bind(null,o));      return n   },   r.n = function(e) {      var t = e&&e.__esModule?function() {return e.default}:function() {return e};      return r.d(t,"a",t),t   },   r.o = function(e,t) {      return Object.prototype.hasOwnProperty.call(e,t)   },   r.p = "",r(r.s = 0)}([function(e,t,r) {   "use strict";   var n = function(e,t) {return e+t}(10,20);   console.log(n)}]);

代码编译如上所示. Webpack添加了一些内部需要的代码，最后可以看到main.js中的代码.我们已经安慰了上面显示的值.

在.html文件中添加最终的js文件，如下所示 :

运行命令 :

npm run publish

要检查输出，我们可以在&minus中打开文件;

http://localhost:8080/

我们得到如上所示的控制台值.现在让我们尝试使用webpack和babel编译成单个文件.

我们将使用webpack将多个js文件捆绑到一个文件中. Babel将用于将es6代码编译为es5.

现在，我们在src/文件夹中有2个js文件 -  main.js和Person.js如下 :

person.js

export class Person {   constructor(fname, lname, age, address) {      this.fname = fname;      this.lname = lname;      this.age = age;      this.address = address;   }   get fullname() {      return this.fname +"-"+this.lname;   }}

我们使用导出来使用Person类的详细信息.

main.js

import {Person} from './person'var a = new Person("Siya", "Kapoor", "15", "Mumbai");var persondet = a.fullname;console.log(persondet);

在main.js中，我们从文件路径导入了Person.

注意 : 我们不必包含person.js，只需包含文件名.我们创建了Person类的对象，并如上所示安慰了详细信息.

Webpack将结合 person.js 和 main.js 并在 dev/main_bundle.js 中更新为一个文件.运行命令 npm run publish 检查浏览器中的输出 :