首页 > 软件开发 > HTML >

如何让浏览器识别模块化语法

来源:互联网 2023-03-16 19:19:14 411

通过让webpack打包相关文件让浏览器识别模块化语法U5l办公区 - 实用经验教程分享!

工具/原料

  • 华硕ASUS
  • windows10.1.1.1

方法/步骤

  • 1

    根据图片创建文件夹U5l办公区 - 实用经验教程分享!

    如何让浏览器识别模块化语法U5l办公区 - 实用经验教程分享!

  • 2

    通过终端输入命令,初始化得到package.json 文件U5l办公区 - 实用经验教程分享!

    如何让浏览器识别模块化语法U5l办公区 - 实用经验教程分享!

  • 3

    package.json 文件中修改main.js的入口文件路径U5l办公区 - 实用经验教程分享!

    如何让浏览器识别模块化语法U5l办公区 - 实用经验教程分享!

    如何让浏览器识别模块化语法U5l办公区 - 实用经验教程分享!

  • 4

    1.创建一个add.js文件(用来测试是否让浏览器识别模块化语法成功)U5l办公区 - 实用经验教程分享!

    2.创建html文件,并引入main.js 文件,右键在浏览器中运行改文件U5l办公区 - 实用经验教程分享!

    3.此时没有使用import模块化语法,且有相关输出,说明js文件引入成功U5l办公区 - 实用经验教程分享!

    如何让浏览器识别模块化语法U5l办公区 - 实用经验教程分享!

    如何让浏览器识别模块化语法U5l办公区 - 实用经验教程分享!

    如何让浏览器识别模块化语法U5l办公区 - 实用经验教程分享!

  • 5

    1.在add.js文件中,使用模块化语法U5l办公区 - 实用经验教程分享!

    2.在main.js文件中,引入add.js,并使用U5l办公区 - 实用经验教程分享!

    3.运行html文件,会报错,因为有些浏览器无法直接识别模块化语法U5l办公区 - 实用经验教程分享!

    如何让浏览器识别模块化语法U5l办公区 - 实用经验教程分享!

    如何让浏览器识别模块化语法U5l办公区 - 实用经验教程分享!

    如何让浏览器识别模块化语法U5l办公区 - 实用经验教程分享!

  • 6

    在终端输入命令行,下载webpack 及 webpack-cliU5l办公区 - 实用经验教程分享!

    如何让浏览器识别模块化语法U5l办公区 - 实用经验教程分享!

  • 6此文章未经授权抓取自百度经验
  • 7

    1.下载完成后,输入相关命令,得到dist文件夹,dist文件夹中有编译完成的main.js文件U5l办公区 - 实用经验教程分享!

    2.运行index.html依然报错(因为运行的文件不是编译后的文件,需要修改一下路径)U5l办公区 - 实用经验教程分享!

    如何让浏览器识别模块化语法U5l办公区 - 实用经验教程分享!

    如何让浏览器识别模块化语法U5l办公区 - 实用经验教程分享!

  • 8

    1.将index.html中js文件的引入路径修改成编译后的文件路径(即dist目录下的man.js文件)U5l办公区 - 实用经验教程分享!

    2.此时运行index.html,则成功U5l办公区 - 实用经验教程分享!

    如何让浏览器识别模块化语法U5l办公区 - 实用经验教程分享!

    如何让浏览器识别模块化语法U5l办公区 - 实用经验教程分享!

    如何让浏览器识别模块化语法U5l办公区 - 实用经验教程分享!

  • 注意事项

    • webpack
    • webpack-cli
    • js
    • import
    • 模块化语法

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!U5l办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码