实现

借助Browserify

一、Browserify模仿了Node.js加载Module的方式，可以让你使用类似于node的require()的方式来组织浏览器端的JavaScript代码，通过预编译让前端Javascript可以直接使用Node NPM安装的一些库。
二、原理：使用Babel将ES6编译为ES5代码，使用Browserify编译打包js

步骤

创建项目结构

|-js
  |-dist //打包生成文件的目录
  |-src //源码所在的目录
    |-module1.js
    |-module2.js
    |-module3.js
    |-app.js //应用主源文件
|-index.html //运行于浏览器上
|-package.json
  {
    "name": "browserify-test",
    "version": "1.0.0"
  }

babel

下载browserify

一、下载安装babel-cli, babel-preset-es2015和browserify

| 【示例】```javascript npm install babel-cli browserify -g npm install babel-preset-es2015 —save-dev // preset 预设(将es6转换成es5的所有插件打包)

 |
| --- |

<a name="aL51d"></a>
##### .babelrc
一、定义.babelrc文件

| 【示例】```javascript
{
    "presets": ["es2015"]
  }

| | —- |

定义模块代码

一、index.html文件要运行在浏览器上，需要借助browserify将app.js文件打包编译，如果直接在index.html引入app.js就会报错！

| 【示例】```javascript //module1.js文件 // 分别暴露 export function foo() { console.log(‘foo() module1’) } export function bar() { console.log(‘bar() module1’) }

```javascript
//module2.js文件
// 统一暴露
function fun1() {
  console.log('fun1() module2')
}
function fun2() {
  console.log('fun2() module2')
}
export { fun1, fun2 }

//module3.js文件
// 默认暴露 可以暴露任意数据类项，暴露什么数据，接收到就是什么数据
export default () => {
  console.log('默认暴露')
}

// app.js文件
import { foo, bar } from './module1'
import { fun1, fun2 } from './module2'
import module3 from './module3'
foo()
bar()
fun1()
fun2()
module3()

| | —- |

编译

一、使用Babel将ES6编译为ES5代码(但包含CommonJS语法) :

【示例】`babel js/src -d js/lib`

二、打包处理js
根目录下运行browserify js/src/app.js -o js/dist/bundle.js

页面使用引入

一、在index.html文件中引入

| 【示例】```javascript

结果<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/355497/1610000166544-ade751b7-cccd-4d3d-94b0-5eb09dda5d29.png#crop=0&crop=0&crop=1&crop=1&height=127&id=zrWOH&margin=%5Bobject%20Object%5D&name=image.png&originHeight=127&originWidth=178&originalType=binary&ratio=1&rotation=0&showTitle=false&size=10591&status=done&style=none&title=&width=178) |
| --- |

<a name="t1RFV"></a>
### 第三方库
一、第三方库(以jQuery为例)如何引入呢？

| 【示例】1、安装依赖`npm install jquery@1`<br />2、在app.js文件中引入```javascript
//app.js文件
import { foo, bar } from './module1'
import { fun1, fun2 } from './module2'
import module3 from './module3'
import $ from 'jquery'
foo()
bar()
fun1()
fun2()
module3()
$('body').css('background', 'green')

| | —- |