文章目录
首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他

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

2019年06月14日 发布 阅读(175) 作者:懒炖

概述

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

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

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

看一下其他浏览器的兼容

开启浏览器的export支持项

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

demo

demo目录结构

  1. .
  2. |-- demo.html
  3. |-- js
  4. | `-- demo.js
  5. |-- module
  6. | `-- a.js
  7. `-- package.json

demo.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta content="IE=7;IE=9" http-equiv="X-UA-Compatible">
  6. <title>demo</title>
  7. <meta content="" name="keywords">
  8. <meta content="" name="description">
  9. </head>
  10. <body>
  11. <div>es6模块化加载</div>
  12. <script type="module" src="./js/demo.js"></script>
  13. </body>
  14. </html>

js/demo.js

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

module/a.js

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

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

工程化

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

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

  1. // 其他依赖包...
  2. const rollup = require('gulp-better-rollup');
  3. const rollupBabel = require('rollup-plugin-babel');
  4. gulp.task('JS_build', function() {
  5. return gulp
  6. .src(
  7. ['./**/*.js']
  8. )
  9. .pipe(
  10. rollup(
  11. {
  12. plugins: [rollupBabel()]
  13. },
  14. {
  15. format: 'umd'
  16. }
  17. )
  18. )
  19. .pipe(gulp.dest('./dist'))
  20. });
  1. // .babelrc
  2. {
  3. "presets": [
  4. [
  5. "env",
  6. {
  7. "modules": false
  8. }
  9. ]
  10. ],
  11. "plugins": ["external-helpers"] //需要安装npm install --save-dev babel-plugin-external-helpers
  12. }

注意事项

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

  • script标签上必须使用type=module

    1. <script type="module" src="./js/demo.js"></script>
版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •