模块化（module）

最新推荐文章于 2023-10-08 08:46:57 发布

原创最新推荐文章于 2023-10-08 08:46:57 发布 · 649 阅读

0 ·

CC 4.0 BY-SA版权

模块化是将复杂程序拆分为独立的文件块，每个块内部数据私有，仅通过暴露接口与其他模块交互。通过npm初始化项目，使用Babel转换源代码到目标目录，再利用Browserify将模块打包为bundle.js供HTML引用。

什么是模块化？

·将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起

·块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信、

1。新建一个文件夹（注意路径里边不能有中文）
2。项目初始化
这里可以在集成终端里打开，然后输入 npm init ，一直回车。
3。bable网站里面：
找到Usage Guide--------Overview--------然后分别输入下边的两行代码：

	npm install --save-dev @babel/core @babel/cli @babel/preset-env

	npm install --save @babel/polyfill

接下来新建一个文件    babel.config.json  ，里边的内容是第二部分里边的代码：

	{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1",
        },
        "useBuiltIns": "usage",
      }
    ]
  ]
}

在这里插入图片描述
注意：如果复制到里边的代码出现错误，记得对象里的逗号（最后一个逗号去掉）

。
。
。

自己建立一个JS文件夹里边有个输入和输出JS文件。
在这里插入图片描述

。
。
然后在集成终端里输入下边的一段代码：

 ./node_modules/.bin/babel src --out-dir lib
这里记得路径  src 改成需要的、eg:
PS D:\mypro> ./node_modules/.bin/babel js --out-dir pt

./node_modules/.bin/babel src --out-dir lib

![JS和pt两个文件](https://img-blog.csdnimg.cn/20200907163438470.png#pic_center

此时已经有一个复制的相同的JS的文件，但是是自己输入的文件夹名字。
可以在自己建立的JS文件里边输入一个变量看下结果：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200907212611172.png#pic_center

在这里引用并且输出

在这里插入图片描述
然后会发现：

然后进入browserify 网站里在集成终端输入两行代码：

1：npm install -g browserify

2：browserify  main.js -o bundle.js
记得修改路径  eg:
PS D:\mypro> browserify  pt/main.js -o pt/bundle.js

browserify pt/main.js -o pt/bundle.js

最后在html中引入 script文件中的bundle.js文件就可以了。

最后引用的话可以用三种方法效果图是在（js里写代码、在main里引用输出、每用一种方法就得在集成终端里边打印

加粗的两行代码）：

在这里插入图片描述