遇到问题:
不识别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 文件。
常用的打包工具包括 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