不用打包工具怎麼使用模塊化開發

時間 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>

<div id="test"></div>

</body>

<script type="text/javascript" src="./utils.js"></script>

<!--傳統的引入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

<script type="module">

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>

<script type="module">

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

複製代碼

相關文章

相關標籤/搜索

Docker命令大全

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<