使用webpack+babel来"编译"你的JS代码(上)

最新推荐文章于 2021-12-07 22:22:57 发布
最新推荐文章于 2021-12-07 22:22:57 发布
阅读量5.5k 收藏
点赞数
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_26672553/article/details/52089523
版权

我常规的引用外部JS文件是
在es2015中，并不需要这样。我们使用import…from语法

示例：我们在ui.js里定义2个变量

let name = "jack";
let age = 18;
exprot{name,age}; //导出这2个变量

然后在index.js引入:

import{name,age} from "./ui.js";
console.log(name);

然后我们”编译”index.js：

$ babel ./es2015/index.js --out-file ./es2015/index-build.js

编译之后的index-build.js:

"use strict";

var _ui = require("./ui.js");

console.log(_ui.name);

这时我们发现
babel把引用部分编译成了require，而require在我们当前的es5中不能运行的。
这时我们就要安装一个新工具webpack（最火的一款模块加载器简打包工具，它能把各种资源，例如js含”JSX”、coffee、样式含”less/sass”、图片等）

如何安装webpack?

$ sudo npm install -g webpack

我们用nodejs的语法重写ui.js

var name = "jack";
exports.abc = name;

在index.js里：

var m = require("./ui.js");
console.log(m.abc);

nodejs是无法在浏览器运行的，所以我们就要借助webpack来打包一下：

$ webpack   ./es2015/index.js ./es2015/index-webpack.js

我们在浏览器测试，控制器打印了”jack”，html代码：

<!DOCTYPE html>
<html>
<head>
    <title>es2105的写法</title>
    <script type="text/javascript" src="es2015/index-webpack.js"></script>
</head>
<body>

</body>
</html>

webpack打包之后的index-webpack.js我们也可以看一看：

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }


/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";

/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    var m = __webpack_require__(1);
    console.log(m.abc);

/***/ },
/* 1 */
/***/ function(module, exports) {

    var name = "jack";
    exports.abc = name;

/***/ }
/******/ ]);
学习笔记666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
node.js、npm、webpack、babel的基本使用
xiefeisd的博客
03-16 462
1 安装node.js和npm 下载node-v10.15.3-linux-x64.tar.xz，上传到~ $ cd ~ /* 进入home */ $ tar xfnode-v10.15.3-linux-x64.tar.xz /* 解压缩 */ $ cd node-v10.15.3-linux-x64 /* 进入目录 */ $ node -v /* 查看版本 */ $ sudo mv...
webpack4安装、配置以及使用babel
weixin_42637336的博客
12-29 1163
大家好，我终于学到webpack的babel的使用了，首先介绍一下为什么要使用babel。 原因：webpack中，默认只能处理一部分ES6(2015)新语法，一部分更高级的ES6语法或者ES7语法，weback是处理不了的，这时候就要借助第三方的loader，来帮助webpack处理这些高级的语法，当第三方loader将这些语法处理完毕后，就会交给webpack进行打包到bundle.js文件里...
babel编译js文件
彭世瑜的博客
04-17 1973
# 安装 $ cnpm install --save-dev @babel/core @babel/cli # 转换 $ ./node_modules/.bin/babel script.js # 或者 $ npx babel script.js 要编译的文件 script.js [1, 2, 3].map(n => n + 1); 编译测试 # 编译（发现没有变化） $ npx ba...
使用webpack+babel来"编译"JS代码
山鬼谣弋痕夕的博客
08-20 1464
常规的引用外部JS文件是  在es2015中，并不需要这样。我们使用import…from语法 示例：我们在ui.js里定义2个变量 let name = "jack"; let age = 18; exprot{name,age}; //导出这2个变量 然后在index.js引入: import{name,age} from "./ui.js"; console.log(name);...
webpack使用babel基本配置
Welkin_qing的博客
03-03 383
配置es6使用的babel 1. package.json文件 { &quot;name&quot;: &quot;webpack_class&quot;, &quot;version&quot;: &quot;1.0.0&quot;, &quot;description&quot;: &quot;&quot;, &quot;main&quot;: &quot;index.
详解Webpack+Babel+React开发环境的搭建的方法步骤
08-28
Babel则是一个JavaScript编译器，它的主要作用是将最新的JavaScript语法（如ES6、ES7等）转换为广泛支持的老版本JavaScript（通常是ES5），以确保代码在各种浏览器环境下都能正常运行。React是Facebook开源的一个...
react-webpack-babel-tutorial：React + Webpack + Babel
02-15
在这个"react-webpack-babel-tutorial"项目中，你将学习如何配置Webpack来处理React应用，如何设置Babel来编译JSX和ES6语法，以及如何组织项目结构。项目文件名"react-webpack-babel-tutorial-master"表明这是一个...
webpack-babel-vue-template:没有VueCli的Webpack + Babel + Vue.js模板
03-22
webpack-babel-vue-template 没有VueCli的Webpack + Babel + Vue.js模板 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint
React全栈++Redux+Flux+webpack+Babel整合开发
03-26
这包括设置webpack配置以处理项目依赖、使用Babel编译源码、集成Redux或Flux进行状态管理，以及如何组织React组件。此外，你可能还会接触到其他辅助工具，如React Router进行页面路由， ESLint进行代码规范检查，...
earthquake-zen-garden:React + React-Router + Webpack + Babel
05-25
【Webpack】Webpack是一个模块打包器，它可以将各种资源（如JavaScript、CSS、图片等）视为模块进行处理，通过配置文件（webpack.config.js）进行编译和打包。Webpack的主要功能包括模块加载、依赖解析、代码分割、...
webpack-typescript-babel:使用Webpack和Babel生成TypeScript代码并使用TypeScript进行类型检查的样本设置
05-04
Webpack-TypeScript-Babel 该示例存储库演示了如何使用Webpack，TypeScript和Babel 构建仓库 npm run build 仅建筑类型 npm run build:types 对仓库进行类型检查 npm run type-check 并以--watch模式运行： npm run type-check:watch
（超全）Vue.js学习笔记—webpack基础配置（webpack4+babel7+vue2）
qq_44093294的博客
07-20 548
webpack基础配置&&单文件组件与vue-loader 参考《Vue,js》实战（梁灏编著） 笔者近期学习Vue.js进阶篇，参考教程流程完成webpack、vue、babel等相关配置时，发现教程的版本较之目前版本有较大差异，因而产生大量BUG，经过一系列百度并参考官方文档，整理出整套webpack4基础配置及vue-loader、babel7相关操作流程。 git代码 1.新建demo文件夹 初始化 npm init 2.安装webpack webpack-cli webpac
webpack学习之6.Babel 7
皮蛋很白的博客
05-03 380
介绍 Babel用于将ES6+转换为ES5。 Babel本身不具有任何转换功能，它把转换的功能分解到一个个插件中。如果不配置插件，使用babel命令转换的代码并没有什么变化。 Babel转换ES6或其他规范可能需要十几二十个插件，为了使开发者不需要一个个添加安装配置，Babel提供了几组插件的集合，称为预设(preset)。开发者可以直接使用预设。 例如推荐的预设 env(@babel/prese...
21 webpack中使用Babel
sinat_41212418的博客
12-07 1061
babel简介 目前ECMAScript 2015+版本的代码在不同的浏览器环境或者同一种浏览器的不同版本中，被支持的程度不一样。导致开发阶段需要做很多兼容处理。如果采用传统的人工兼容方式，不仅耗时耗力，而且不能够保证达到要求。 幸运的是，目前已经有许多的开源社区在做这方面的事情，只需要使用社区提供的工具或者第三方库就可以很方便实现各种运行环境的兼容，其中的佼佼者就是Babel了。 Babel是一个工具链，主要用于将ECMAScript 2015+版本的代码转换为向后兼容的JavaScript代码，使之可以
使用webpack+babel来"编译"你的JS代码(下)
08-01 1万+
上节课我们学习了 1.安装了babel的es2015转换器 编写了一个简单的es2015语法的js代码 let name = “zhangsan”; 2.执行了 babel index.js –out-file xxx.js 把代码进行转化 3.安装了webpack，对我们的代码进行打包（非es2015代码）这节课我们来学习如何结合babel对我们的es2015代码进行webpack打包
webpack 配合babel 将es6转成es5 超简单实例
热门推荐
现在学习也不晚
11-30 4万+
今天接触了webpack，第一次使用webpack进行转码，竟然稀里糊涂就成功了，哈哈。下面附上流程创建个文件夹，初始化一下，首先全局安装webpacknpm install webpack -g然后安装babelnpm install --save-dev babel-core babel-preset-es2015 npm install --save-dev babel-loader在当前文...
webpack之babel讲解
coding...
05-05 2621
前言：本文演示了如何安装配置babel基本命令如何安装配置babel插件如何配置.babelrc文件如何安装配置babel预设presets正文：babel 是一个强大的js编译器，功能包括不限于：es6编译成es5语法；编译jsx语法安装配置babel首先，创建项目目录,初始化npm$ mkdir babel $ cd babel $ npm init $ mkdir src $ cd src ...
babel - 使用Webpack和Babel来搭建React应用程序
oscar92420aaa的博客
12-18 1547
用Webpack(npm install -g webpack)代码打包，Webpack大致需要知道三件事： 1)让Webpack知道应用程序或js文件的根目录 2)让Webpack知道做何种转换 3)让Webpack知道转换后的文件保存在哪里 具体来说，大致要做以下几件事情： 1)在项目根目录下有一个webpack.config.js文件
webpack + babel新版本
jdk1129的博客
05-14 543
webpack：4.31.0 babel：7 按照视频教程做一直报错，后来看官网加找了篇文章终于通了 安装的包有这几个： 一开始没有装@babel/runtime报错： babel的配置文件.babelrc webpack.config.js中配制处理高级js语法的loader ...
webpack babel解析三个点语法
最新发布
06-03
Webpack和Babel都可以用于解析三个点语法...使用Babel编译JS文件时，它会自动将三个点语法转换为兼容的代码。 总的来说，无论是使用Webpack还是Babel，只要安装好相应的插件和预设，就可以很方便地解析三个点语法了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值