BabelJS - 使用 Babel 和 Webpack

BabelJS - 使用 Babel 和 Webpack

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

在这里,我们将讨论使用 babel 和 webpack 进行项目设置。创建一个名为的文件夹并在 Visual Studio IDE 中打开它。

要创建项目设置,请运行 npm init babelwebpack,如下所示

这是在 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 并更新最终文件的存储路径。现在我们要用来更新最终文件的路径是 /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']
            }
         }
      ]
   }
};

文件结构如上图所示。它从路径开始,它给出了当前路径的详细信息。

var path = require('path'); //gives the current path

接下来是 module.exports 对象,它具有属性 entry、output 和 module。入口是起点。在这里,我们需要给出需要编译的主要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'
},

输出是具有路径和文件名详细信息的对象。路径将保存编译文件将保存的文件夹,文件名将告诉您.html文件中要使用的最终文件的名称。

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

模块是一个包含规则细节的对象。它具有以下属性

  • test
  • include
  • loader
  • query

test 将保存所有以 .js 结尾的 js 文件的详细信息。它具有模式,它将在给定入口点的末尾查找 .js。

include 指示要查看的文件上正在使用的文件夹。

Loader 使用 babel-loader 来编译代码。

Query 有属性预设,它是一个值为 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文件如下

<html>
   <head></head>
   <body>
      <script type="text/javascript" src="dev/main_bundle.js"></script>
   </body>
</html>

运行命令

npm run publish

要检查输出,我们可以在

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;
   }
}

我们使用 export 来使用 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 在浏览器中检查输出

版权声明:著作权归作者所有。

相关推荐

Linux使用wget和curl下载jdk

在Linux下安装jdk主要有两种方式:下载安装包手动安装和使用Linux的安装工具(yum或ubuntu的apt)安装。使用Linux安装工具安装的是OpenJDK,如果我们想安装oracle的JDK则需要下载安装包手动安装。下载Oracle JDK需要接受license,在Linux可以使用wget和curl来下载Wget下载Java 8u15164位的tar.gz和rpm

Git:.gitignore和.gitkeep文件的使用

.gitignore.gitignore,顾名思义,这个文件是用于列出那些让Git忽略,不被跟踪的文件,即排除在Git的版本控制外。可以使用*通配符匹配多个字符。忽略指定名称的文件# .gitignore示例,忽略test.txt文件  ################### test.txt 忽略指定后缀的文件# .gitignore示例,忽略后缀为.impl的文件

Android使用InputMethodManager显示和隐藏软键盘

Android主要用InputMethodManager来对软键盘进行管理。手动显示或隐藏软键盘前需要先获取InputMethodManager。InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE); if (imm&

使用webpack构建vue项目

简单记录下使用webpack构建vue项目。环境依赖1、安装vueyarn add vue 2、安装webpack相关开发包yarn add webpack babel-core babel-loader babel-preset-env --dev 3、安装vue-loader和vue-template-compil

基于webpack的vue项目使用别名避免../深路径

在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件:import userinfo from '../../../components/userinfo.vue'; 使用../引用的路径比较深,定位路径和书写不方便,并且不直观。由于项目是基于webpack,比较好的做法是使用webpack对路径定义一个别名。在webpack.base.config.js找到resolve节

使用Webpack、TypeScript 和React搭建应用

这里简单介绍基于webpack + typescript + react搭建一个应用。初始化项目创建一个空文件夹demo,使用npm在空文件夹初始化项目。npm init npm install --save-dev webpack npm install --save-dev types

webpack编译打包scss

依赖webpack编译scss需要用到这几个loader:style-loader,css-loader,postcss-loader,sass-loader以及插件:extract-text-webpack-plugin安装相关loader和插件:npm install style-loader css-loader postcss-loader 

Kotlin使用JUnit 5的@BeforeAll和@AfterAll

Java版本JUnit5 @BeforeAll和@AfterAll的用法可以参考此文。Kotlin的类是没有静态方法的,如果要提供类似于Java的静态方法,可以使用伴生对象(companion object)语法。应用于所有实例的@BeforeAll和@AfterAll把Java版静态方法的JUnit 5 @BeforeAll和@AfterAll使用Kotl

理解JavaScript的var, let和const使用与作用域

在JavaScript里,var,let和const都可以用来声明变量的。var username= '张三'; let gender = 'Male'; const age = 20;let,var和const的使用let和var可以在声明后更改它们的值,并且在声明时不赋值,JavaScript会自动以默认值对它们做初始化。const声明的变量不能改变,也即是常量,声明变量时必须赋值。var u