不用打包工具怎么使用模块化开发

时间 2019-12-05

标签不用打包工具怎么使用模块化开发繁體版

原文原文链接

拿vue为例子，目前经常使用的前端开发方式是webpack+vue，每个js，每个vue均可以做为一个模块，采用ES6支持的export import 方式开发，再配上vs code、 webstorm。

可是既然模块化开发是ES6 原生支持的，那么如何让chrome原生识别你的模块呢，查了一下资料居然不是不少。因此本身想亲自写demo测一下。百度了type=module 大多指向的是一位外国友人的文档https://jakearchibald.com/2017/es-modules-in-browsers/。 javascript

废话很少说，show you the code html

1 传统方式前端

页面文件 test.html vue

<!DOCTYPE html>

<body>

</body>

<!--传统的引入js方式可使用 ./utils.js 和utils.js 两种方式；

可是type=module方式只能使用./utils.js方式不支持utils.js方式（import {addTextToBody} from './utils.js';）--> java

脚本文件 .utils.jswebpack

const div = document.createElement('div');

div.textContent = "this is old way to import js";

document.getElementById("test").append(div);

而后直接chrome运行能够正常显示git

2 模块方式引入github

页面文件 test.html

<!DOCTYPE html>web

import {addTextToBody} from './utils.js'; //这种方式部署在IIS能够正常执行访问，可是直接用浏览器打开不能够

addTextToBody('Modules are pretty cool.');

</script>

模块脚本文件 utils.js chrome

export function addTextToBody(text) {

const div = document.createElement('div');

div.textContent = text;

document.body.appendChild(div);

}

注意这种方式若是直接浏览器打开html 是不能正常执行的，须要部署到服务器

3 固然你还能够这样使用脚本文件命名 .mjs,须要在服务器增长minetype 映射文件类型

与2 无明显不一样，只是把文件名改为了utils.mjs, html 文件引入js的地方改成utils.mjs便可

4 上述方式是直接在html页面引入了单个模块，若是存在多个js模块，模块间如何使用呢？

页面文件 test.html

<!DOCTYPE html>

import {addTextToBody} from './utils.js'; //这种方式部署在IIS能够正常执行访问，可是直接用浏览器打开不能够

addTextToBody('Modules are pretty cool.');

</script>

模块脚本文件1 utils.js

import u2 from './u2.js' //必须加./u2.js方式，chrome不识别u2.js,这也是模块化和非模块化的区别

export function addTextToBody(text) {

const div = document.createElement('div');

div.textContent = text;

document.body.appendChild(div);

u2();

}

模块脚本文件2 u2.js 文件

export default function test() {

const div = document.createElement('div');

div.textContent = "this is u2 function";

document.body.appendChild(div);

}

github地址

https://github.com/shuihan03/chrome-module.git

复制代码