ES6模块化

最新推荐文章于 2024-06-21 17:21:59 发布

我只是个小前端

最新推荐文章于 2024-06-21 17:21:59 发布

阅读量345

点赞数

分类专栏： javascript 学习笔记文章标签： ES6模块化

本文链接：https://blog.csdn.net/chenlinIT/article/details/80707433

版权

javascript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

学习笔记

5 篇文章 0 订阅

订阅专栏

ES6新增Module语法用来进行模块化开发，详情访问：ECMAScript 6 入门-Module 的语法。

基本使用方法

项目目录

|--ES6
    |--js
        |--build    //es6转化为es5后的js文件夹
        |--dist     //编辑打包后的主模块文件夹
        |--src      //源码文件夹
            |--main.js    //主模块
            |--module1.js
            |--module2.js
            |--module3.js
    |--.babelrc    //.babelrc配置文件
    |--index.html
    |--package.json

配置package.json

//使用npm初始化一个或者手动建一个
npm init

//修改package.json
{
  "name": "es6-babel-browserify",
  "version": "1.0.0"
}

安装插件

首先需要安装以下插件

//babel-cli babel命令行接口
npm install babel-cli --save-dev

//browserify 
npm install browserify --save-dev

//babel-preset-es2015
npm install babel-preset-es2015 --save-dev

//***可以使用一条指令同时安装***
//npm install babel-cli browserify babel-preset-es2015 --save-dev

配置.babelrc
babelrc是babel运行时控制的配置，”presets”是一个数组,详情查看babel官方文档

{
    "presets": ["es2015"]
}

定义模块

//module1.js
//分别暴露
export function foo() {
    console.log("module1_foo()");
}
export function bar() {
    console.log("module1_bar()");
}

export let arr = [3,2,5,6,1,8,4,7]

//module2.js
function fun1() {
    console.log("module2_fun1");
}
function fun2() {
    console.log("module2_fun2");
}
export {fun1, fun2}

//module3.js
//默认暴露模块
export default () => {
    console.log('默认暴露');
}

上面展示了3中定义方式，前面两种定义方式在引入模块的时候需要 import {} from '路径'的方式来引入，如下：

模块引入

先安装一个第三方模块jqurey

npm install jqurey --save

通过npm安装的模块在引入时只需要写模块名称即可：

//main.js

//引入模块
//引入第三方库
import $ from 'jquery';    //因为是通过npm安装的只写模块名称，不需要写路径。
import {foo, bar} from './module1';
import {fun1, fun2} from './module2';
import module3 from './module3';

foo();
bar();
fun1();
fun2();
module3();
$('body').css('background','green');

到这里，模块定义与引入完成。下面开始将es6转成es5

使用babel将ES6转成ES5

babel js/src -d js/build

意思是将js/src目录下的文件转成ES5并保存到js/build文件夹下，使用方法详见babel官方文档

编译打包

这里对转换后的文件进行打包，和前面介绍CommonJS在浏览器中使用的方法是一样的。

browserify js/build/main.js -o js/dist/bundle.js

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>ES6</title>
</head>
<body>
    <script src="./js/dist/bunlde.js"></script>
</body>
</html>

浏览器中运行查看console

这里写图片描述
打印结果都正确，使用jquery改变body背景色也成功。

总结

ES6模块开发需要使用babel编译成ES5，然后使用browserify打包。需要安装的插件有：babel-cli、browserify、babel-preset-es2015，特别注意.babelrc的配置。
在实际操作中发现每次改变源码后都要执行一次编译成，打包等动作。显得很繁琐，不够高效，为了解决这个问题我们就要学习一下自动化构建了，加油吧！ヾ(◍°∇°◍)ﾉﾞ

我只是个小前端

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ES6模块化

ES6新增另外Module语法用来进行模块化开发，详情访问：ECMAScript 6 入门-Module 的语法。基本使用方法项目目录|--ES6 |--js |--build //es6转化为es5后的js文件夹 |--dist //编辑打包后的主模块文件夹 |--src //源码文件夹 ...
复制链接

扫一扫

专栏目录