首页手记 IE，你滚！用LESS与Module来提升你的效率

IE，你滚！用LESS与Module来提升你的效率

标签：

Html5 JavaScript Sass/Less

万恶的IE，相信有一定前端经验的小伙伴都会对他咬牙切齿，没办法，如果是商业软件，尤其在中国这个互联网环境下，不做IE兼容的很少很少，除非是非常新兴的互联网工程，才有可能完全脱离IE的魔爪。

那么，我们假设你做得就是一个非常新兴的互联网工程（首先要恭喜你），亦或者你做得是非商业或者干脆个人项目，那么你就可以很骚包的放弃向下兼容。

什么？你说Babel？拜托，都不兼容了，你上Babel干嘛？配置个环境搞个半死，那别人的脚手架，修修改改又是半死。

那怎么破？

两招带你飞：

less
module

less

这个前端威名远扬的帅哥，相信没人没听说过吧（我指前端），正如官网所说：

It's CSS, with just a little more.

这里不做过多less的讲解，你就知道他能大幅精简你的CSS代码，并且几乎所有的主流编辑器都支持它的插件就行，主要功能截个图，自己去看吧，对了，它有中文网：

比如VS Code有个插件叫：Easy LESS，就支持在入口less写上// out: ../../css/app.css, compress: true, sourceMap: false，然后在其他子模块less写上// main: ../main.less从而达到无论哪个less更新，都会根据入口less重新生成唯一一个app.css，并且我还是设置压缩过的。。。

可能有人问，scss等等为什么不推荐？stylus不熟，sass用过，对于sass说一点。sass这种依赖其他语言，sass就是依赖Ruby，然后不同平台对Ruby支持或版本又不同，很多时候可预见的会遇到编译等问题。

而less则没有这个问题，编辑器插件的事情已经说了，再不济，直接引入官网提供的less.min.js文件，也就150K大小，然后link标签写成这样：

<link rel="stylesheet/less" type="text/css" href="styles.less" />

然后就可以直接html文件里面引用less文件了，恩，相当爽。如果上传服务器，记得换成CDN啊。

less直接使用完整html代码：

<!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>Less</title>
  <link rel="stylesheet/less" type="text/css" href="styles.less" />
</head>
<body>

  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="//cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js" ></script>  
</body>
</html>

module

虽然CSS也有，但是由于CSS不能使用很多函数式功能，所以弃用。

没错，就是ES6的module，你是不是还在webpack -w或npm run dev来将ES6语法编译成ES5？是不是没有浏览器向下兼容，你也习惯性的这么干了？

那么恭喜你，下面你可以撒开webpack一段时间，让你的网页工程变得如当年一般清纯：

顶多你再弄个README.md跟域名处理成这样：

这，就是你的工程目录结构了，是不是很怀念。不管是多年的工作老手，还是刚刚学完课程的萌新，唉，那些年我们写过的网页啊。

css文件夹里面我藏了个less文件夹，按照功能划分模块的，但是最后导出的就只有一个app.css，所以藏进去不在外面放着了。

现在就说说怎么用吧，其实非常简单，就是这么一个关键词：

<script type='module'></script>

对，不是默认的<script></script>，而是换成了type为module的script，这里就是告诉浏览器，我们用的是最新语法，你给我注意了。

这玩意儿有两种写法：

<script type='module'>js code</script>
<script type='module' src='js/path'></script>

跟我们所知的js写法一样一样的。

亮点就是：

<script type='module'>
import Homepage from './pages/homepage.js'
import Share from './pages/share.js'

m.route(document.body, '/', {
  "/": Homepage,
  '/share': Share,
})
</script>

这种之前需要webpack之类打包工具编译的语法直接被支持，这里举例的是我之前的一个工程，有看《易、轻、快！超牛逼纯JS前端框架——MithrilJS》文章的人应该有点印象，没错，我又改写了。。。

如果像我一样搭配上MithrilJS这样一个10K不到的纯JS框架写项目，那酸爽，谁用谁知道。

为何不试一试呢，对吧？