用 import/export 全靠“抄”

最新推荐文章于 2023-08-06 19:33:30 发布

lefex

最新推荐文章于 2023-08-06 19:33:30 发布

阅读量488

点赞数

文章标签： javascript vue js web css

本文链接：https://blog.csdn.net/lefex/article/details/108525907

版权

最近做了一些 npm 包，愈发觉得前端模块化太重要了，决定写几篇文章说说我的感受。

很早以前，JavaScript 是不支持模块化的，这相比其它语言来说确实有点反常，没有模块化就意外着「更难的代码隔离」，这终究会导致维护成本激增。

不过现在 JS 模块化发展的已经很成熟了。你也一定听说过 ESM、CMD、AMD 这些模块化规范。规范其实就是一个准则，约定如何使用不同文件之间的符号（函数、变量、类等）。在 webpack 这一阶段学习中，webpack 会把每一个文件看做是一个 module，来到模块化的世界，这解释的更通了，「模块就是文件，文件就是模块」。

在浏览器中常用的是 ESM（ECMAScript Module），也就是你熟悉的 import/export，但这种模式并不兼容所有的浏览器，需要通过打包工具进行打包。打包 npm 包时常用的是 rollup，但由于在第 9 阶段：每位前端人都需要搞懂、搞透前端构建中猛学了 webpack，决定用 webpack 进行打包，同时也为了使用 webserver。用 webserver 的原因是因为在浏览器中直接使用 script 标签时会出现跨域问题（以 module 的方式使用）:

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

项目配置

整个 demo 的目录结构如下:

我会把它上传到我的 GitHub：

https://github.com/lefex/FE

demo 中使用 webpack 进行打包，配置文件如下（其实就是通过入口 index.js 把它的依赖打包成一个文件 bundle.js）：

const path = require('path');


module.exports = {
    mode: 'development',
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist')
    },
    devtool: 'source-map',
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000
    }
}

在 HTML 文件中，直接使用打包后的文件（可直接在浏览器中打开这个 HTML 文件），也可通过 webserver 预览：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>import</title>
    <script src="./bundle.js"></script>
</head>
<body>
    <h1>模块化之 import</h1>
</body>
</html>

import / export 用法

export 其实就是把某个 js 文件中的符号暴露给其它 js 文件，有两种写法：

1、直接导出一个名字

代码中可以导出函数、类、变量等。

export function getUserName() {
    return 'suyan';
}
export class Suyan {
    constructor() {
        console.log('suyan created!');
    }
}
export let age = 24, name = 'suyan';


const curTime = () => {
    return new Date();
}
const DEFAULT_AGE = 10;
export {
    curTime,
    // 重命名
    DEFAULT_AGE as dAge
};


// 重其它模块中导出
export { join } from './stringUtils';

import 的时候，直接使用导出时的名字即可，也可以重命名。

import {
    getUserName as uname,
    Suyan,
    age,
    name,
    curTime,
    dAge,
    join
} from './utils';

也可以导入整个模块：

import * as utils from './utils';
console.log(utils);

2、以默认的方式导出

一个文件内，默认导出（export default）只能有一个：

export default function welcome() {
    return 'welcome to learn js module by suyan';
}

使用的时候：

import welcome from './utils';

运行与结果

整个 index.js 文件代码如下：

import {
    getUserName as uname,
    Suyan,
    age,
    name,
    curTime,
    dAge,
    join
} from './utils';
import welcome from './utils';


// 导入整个模块
import * as utils from './utils';
console.log(utils);


console.log('getUserName -----');
console.log(uname());


console.log('Suyan -----');
console.log(new Suyan());


console.log('age -----');
console.log(age);


console.log('name -----');
console.log(name);


console.log('curTime -----');
console.log(curTime());


console.log('dAge -----');
console.log(dAge);


console.log('join -----');
console.log(join('suyan', ' learn FE'));


console.log('welcome -----');
console.log(welcome());

执行 npm run start，会在浏览器中打开 HTML ，打印输出结果为：

整个 imort / export 的使用就这么多。这节内容涉及到了前面的 webpack 知识，我在全局安装了 webpack、webpack-cli、webpack-dev-sever，可以看安装 webpack 搞定 Vue 打包、webpack 辅助高效开发。大家加油！

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

lefex

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用 import/export 全靠“抄”

最近做了一些 npm 包，愈发觉得前端模块化太重要了，决定写几篇文章说说我的感受。很早以前，JavaScript 是不支持模块化的，这相比其它语言来说确实有点反常，没有模块化就意外着「更...
复制链接

扫一扫