使用es6的exports和import 进行模块化开发

2019年06月14日发布阅读(2940) 作者：Jerman

概述

在ES5的时候，我们经常使用seajs,requirejs等库来实现模块化开发。后面又出现了vuejs,reactjs实现组件化开发。

但对于PC端的WEB页面来说，因为要考虑seo的因素，vue和react个人觉得就不是很适用了

ES6引入了import和export，虽然并不是所有浏览器都支持，但新版的chrome和firefox运行import和export已经不是问题了。使用es6甚至更新的JS语法来进行浏览器JS开发，应该也是以后的一个趋势了

看一下其他浏览器的兼容

开启浏览器的export支持项

firefox不用特意开启，默认就支持。
chrome需要手动开启一下，输入chrome://flags/，搜索Experimental JavaScript,把Experimental JavaScript设置为Enabled,如下图:

demo

demo目录结构

.
|-- demo.html
|-- js
|   `-- demo.js
|-- module
|   `-- a.js
`-- package.json

demo.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="IE=7;IE=9" http-equiv="X-UA-Compatible">
    <title>demo</title>
    <meta content="" name="keywords">
    <meta content="" name="description">
</head>
<body>
    <div>es6模块化加载</div>
    <script type="module" src="./js/demo.js"></script>
</body>
</html>

js/demo.js

import a from '../module/a.js';
a();

module/a.js

export default function(){
    console.log('demo')
}

运行结果，如下可见，浏览器进行了模块化加载并执行了JS

工程化

使用es6进行模块化开发，虽然在chrome上可以跑，但如果我们要让发布的代码兼容低版本的浏览器，还是需要把它转成es5的。

多页面，我习惯使用gulp进行工程化打包，这里引入了rollup插件来打包es6模块

// 其他依赖包...
const rollup = require('gulp-better-rollup');
const rollupBabel = require('rollup-plugin-babel');
gulp.task('JS_build', function() {
    return gulp
        .src(
            ['./**/*.js']
        )
        .pipe(
            rollup(
                {
                    plugins: [rollupBabel()]
                },
                {
                    format: 'umd'
                }
            )
        )
        .pipe(gulp.dest('./dist'))
});

// .babelrc
{
    "presets": [
      [
        "env",
        {
          "modules": false
        }
      ]
    ],
    "plugins": ["external-helpers"] //需要安装npm install --save-dev babel-plugin-external-helpers
  }

注意事项

使用es6模块化加载，必须启用一个localhost服务，直接打开文件会加载失败

script标签上必须使用type=module

<script type="module" src="./js/demo.js"></script>

Javascript

目录

使用es6的exports和import 进行模块化开发

概述

开启浏览器的export支持项

demo

工程化

注意事项