当前位置：首页 > 软件库 > Web应用开发 > 常用JavaScript包 >

Babel-Require

JS模块同步加载器

授权协议 BSD

开发语言 JavaScript

所属分类 Web应用开发、常用JavaScript包

软件类型开源软件

地区国产

投递者贝洲

操作系统跨平台

开源组织无

适用人群未知

软件官网

官方下载

软件概览

Babel-Require是一个CMD规范的js模块同步加载器，其本质是一个类似NodeJS的"require()"函数。

在浏览器中使用Babel动态编译运行ECMScript2015，如果包含import关键字则会报错，此函数库设计用于解决该问题。让开发者不用编译即可直接在浏览器中import ECMScript2015 js模块, 目前支持Babel5.x。

使用同步AJAX实现，单线程下载，只能用于开发调试，当import文件较多时会稍慢。

在线例子：

http://wmlgl.github.io/babel-require/examples/

配置：

加载模块时，如果配置了jsx，并且该模块属于jsx项配置的目录下，则加载".jsx"文件，否则加载".js"文件。 Config exmaple:

<script type="text/javascript">
require.config({
    jsx: ["app"]
});
</script>
<script type="text/babel">
    // 会加载"app/app.jsx"
    // Will be load "app/app.jsx"
    import App from "app/app";

    // 会加载"lib/hello.js"
    // Will be load "lib/hello.js"
    import Hello from "lib/hello";
</script>

示例：

<!DOCTYPE html><html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Examples</title>
        <script src="lib/react/react.js"></script>
        <script src="lib/react/react-dom.js"></script>
        <script src="lib/babel-core/browser.js"></script>
        <script src="lib/babel-core/browser-polyfill.js"></script>
        <script src="dest/babel-require.js"></script>
    </head>
    <body>
        <div id="container">loading...</div>
    </body></html><script type="text/babel">
    import App from "app/app";

    ReactDOM.render(<App/>, document.getElementById('container'));</script>
// file: app/app.jsx
import Test1 from './loadtest1/test1'
import Test2 from './loadtest2/test2'

export default class App extends React.Component {
    render () {
        return (
            <div>
                Hello App!
                <Test1 />
                <Test2 />
            </div>
        );
    }
}

使用案例

Babel详解

什么是Babel Babel 是一个 JavaScript 编译器，是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。用法在这里会介绍如何将用es2015+写的JavaScript代码转换为能在当前浏览器正常执行的代码。包括两方面：语法转换、功能补充（这里暂时叫这个名字，之后会详细
【es6】require babel

1. https://www.babeljs.cn/docs/babel-register 安装 npm install @babel/core @babel/register --save-dev Copy 用法 require("@babel/register"); Copy node 后续运行时所需要 require 进来的扩展名为 .es6、.es、.jsx、 .mjs 和 .js
webpack 理解 babel-polyfill 和 babel-runtime 及 babel-plugin-transform-runtime的配置

一：理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel? 它是干什么用的？ ES6是2015年发布的下一代javascript语言标准，它引入了新的语法和API，使我们编写js代码更加得心应手，比如class，let,for...of promise等等这样的，但是可惜的是这些js新特性只被最新版本的浏览器支持，但是低版本浏览器并不支持，那么低版本浏览器下就需要一
babel-loader

写一个简单的 babel-loader 这里所有的代码都在github上，地址 https://github.com/lihongxun945/my-babel-loader。这里以 babel-loader 为例，看我们如何写一个自己的loader。首先，我们参考这篇官方教程，虽然写的很粗略，但是我们可以学会写一个简单的loader。最简单的loader是一个什么都不做，原样返回JS代码的
Babel之babel-polyfill、babel-runtime、transform-runtime详解

引言# babel默认只转换新的 JavaScript 语法，比如箭头函数、扩展运算（spread）。不转换新的 API，例如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转译。如果想使用这些新的对象和方法，则需要为当前环境提供一个垫片（poly
babel-core升级为@babel/core ，eslint-loader升级为eslint-webpack-plugin， babel-eslint升级为@babel/...

过程不详细叙述了，很多报错，经过调试测试，记录下可用版本先把之前相关的包都卸载，再重装涉及到的改动文件 package.json "@babel/core": "^7.18.6", "@babel/eslint-parser": "^7.18.2", "@babel/plugin-proposal-class-properties": "^7.18.6", "@
babel-loader，babel-core，babel-polify，babel-plugin-transform-runtime之间的关系

babel-core在npm官网中的解释是 Babel compiler core. 也就是Babel编译器的核心，因此意味着如果要使用babel-loader进行es6的转码你首先必须得安装babel-core npm install --save-dev babel-core babel-core安装了就行，无需手动配置和引入。搞懂了babel-loader和babel-core的关系，那b
【工作实录】解决babel-plugin-dynamic-import-node引发的问题

解决babel-plugin-dynamic-import-node引发的问题前言我们项目中使用的是 vue-admin-template 的后台框架。在做页面权限控制的时候，使用的是router.addRoutes 进行菜单以及页面的按需加载。产生的问题问题一：import 表达式写法直接报错表现： /src/store/modules/permission.js做页面的权限处理，我们

Babel-Require

同类工具

相关阅读

相关文章

相关问答

相关文档