用babel时出现的问题及browser的使用

遇到问题：

不识别require方法

产生这个问题的原因：（根本原因是模块化es6方式转化成require和exports的commonJs形式）。浏览器不识别commonJS.

所以用进行打包处理（编译）。形成一个打包后的新文件。该文件在html中中引入即可。

处理方式：

使用 Babel 的时候应该引入了 preset-es2015, 这是个转码插件集合，里面包含了 transform-es2015-modules-commonjs。所以模块转换出来是 CommonJS 标准。

Babel 的作用是帮助我们转换 ES6 代码为 ES5, 但是它没有模块管理的功能，浏览器端默认也无法识别 CommonJs 规范，这就需要我们额外使用模块打包工具，为我们的代码做一些包裹，让它能在浏览器端使用。比如 Browserify, Webpack。

Babel 所做的只是帮你把‘ES6 模块化语法’转化为‘CommonJS 模块化语法’，其中的require exports 等是 CommonJS 在具体实现中所提供的变量。

任何实现 CommonJS 规范的环境（如 node 环境）可以直接运行这样的代码，而浏览器环境并没有实现对 CommonJS 规范的支持，所以我们需要使用打包工具（bundler）来进行打包，说的直观一点就是把所有的模块组装起来，形成一个常规的 js 文件。

扫描二维码关注公众号，回复： 4071727 查看本文章

常用的打包工具包括 browserify webpack rollup 等。

我以browserify为例：

首先用npm安装browserify

我用的是全局安装的方式：

npm install -g browserify

使用下面的命令，就能将b.js转为浏览器可用的格式bb.js

这种没有指定路径的，默认就在根路径下了

$ browserify b.js > bb.js

指定路径的编译方式
browserify browser.js -o static/bundle.js

这种方式是将browser.js 编译编译后生成到satic 文件中生成的文件为bundle.js

browserify lib/browser.js -o static/bundle.js

指定lib文件夹下browser.js 文件编译后生成到static文件夹中，生成文件为bundle.js

关于打包命令的问题：

如果引入的文件特别多，选择哪个文件打包呢？入口文件（js文件），将生成的文件直接在html中引入即可。

下边直接亮出我的例子：

import.html就是在浏览器访问的页面，里边引入了aa.js文件

下边这个是我在package.json文件中配置的命令。

第一个babel命令，将文件夹src下的所有文件全部编译，生成新文件到lib文件夹中，lib文件夹中的所有代码都是commonJs形式。

第二个是browserify命令，将lib/import.js文件生成aa.js文件。

这块可能有疑问： lib文件夹中有两个.js文件。为什么只编译一个文件。因为import.js文件没有 exports了。仅仅有require()。

也就是说，该文件中只是引入其他文件，用其他文件的API。browserify打包时（编译）会去找import.js中有没有require('./xx')如果有，它就会去找xx.js文件，接着将如果xx.js中还有require（'./xx2'）那它会接着去。直到js文件中没有了require（）才算完成。这样browserify会将所有文件中的代码都打包一个文件中。那就是aa.js文件（以我写的命令为例）

---------------------------------------------------------------------------------------------------------------------------------------------

我写的代码：

源文件：

src文件夹中的代码：

import.js

import {bar,foo, fn0, fn1} from "./export.js";
console.log(bar+"_"+foo);
        fn0();
        fn1();

export.js

let bar = "stringBar";
let foo = "stringFoo";
let fn0 = function() {
    console.log("fn0");
};
let fn1 = function() {
    console.log("fn1");
};
export{ bar , foo, fn0, fn1}

import.html

其中aa.js是经历了babel和browser后生成的文件，也就是es6形式（src文件）-->commonJS形式的es5形式（lib文件）->es5形式（aa.js文件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="./aa.js">
    </script>
</body>
</html>

经过babel打包生成在lib文件夹中的文件代码：

lib文件夹：

记住，哪个文件只用了require并且没有exports方法。就以哪个文件为入口文件，

我以import.js为入口文件。

我配置的package.json文件（npmpro为项目名称），这些文件全都在这个项目下

和我有相同的问题：

两个问题哪个都一样，建议两个都看看

https://segmentfault.com/q/1010000005106711/a-1020000005106862

https://www.cnblogs.com/xiaohuochai/p/6850977.html （主要看这个）

让浏览器识别模块化的方式：https://www.jdon.com/idea/js/javascript-module-loaders.html 这里介绍了一些方法

browserify 解决方式：http://www.ruanyifeng.com/blog/2015/05/commonjs-in-browser.html

这个是browserify 的详解https://www.cnblogs.com/liulangmao/p/4920534.html

用babel时出现的问题及browser的使用

猜你喜欢