• 技术文章 >web前端 >前端问答

    webpack支持es6吗

    青灯夜游青灯夜游2023-01-18 19:01:37原创53

    webpack支持es6。webpack 2支持原生的ES6模块语法,意味着开发者无须额外引入babel这样的工具,就可以使用import和export。但如果使用其他的ES6+特性,仍然需要引入babel工具。

    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

    模块方法


    在 webpack 打包应用程序时,你可以选择各种模块语法风格,包括 ES6,CommonJS 和 AMD。

    尽管 webpack 支持多种模块语法,但我们还是建议尽量使用一致的语法,以此避免一些奇怪的行为和 bug。事实上,当距离最近的 package.json 文件中包含值为 "module" 或 "commonjs" 的 "type" 字段时,webpack 会启用语法一致性检查。请大家在阅读前,注意此情况:

    ES6 (推荐)


    webpack 2 支持原生的 ES6 模块语法,意味着你无须额外引入 babel 这样的工具,就可以使用 import 和 export。但是注意,如果使用其他的 ES6+ 特性,仍然需要引入 babel。webpack 支持以下的方法:

    import

    通过 import 以静态的方式导入另一个通过 export 导出的模块。

    import MyModule from './my-module.js';
    import { NamedExport } from './other-module.js';

    Warning:

    这里的关键词是静态的。标准的 import 语句中,模块语句中不能以「具有逻辑或含有变量」的动态方式去引入其他模块。关于 import 的更多信息和 import() 动态用法。

    你也通过 import 来引入 Data URI:

    import 'data:text/javascript;charset=utf-8;base64,Y29uc29sZS5sb2coJ2lubGluZSAxJyk7';
    import {
      number,
      fn,
    } from 'data:text/javascript;charset=utf-8;base64,ZXhwb3J0IGNvbnN0IG51bWJlciA9IDQyOwpleHBvcnQgY29uc3QgZm4gPSAoKSA9PiAiSGVsbG8gd29ybGQiOw==';

    export

    默认导出整个模块或具名导出模块。

    // 具名导出
    export var Count = 5;
    export function Multiply(a, b) {
      return a * b;
    }
    
    // 默认导出
    export default {
      // Some data...
    };

    import()

    function(string path):Promise

    动态的加载模块。调用 import 的之处,被视为分割点,意思是,被请求的模块和它引用的所有子模块,会分割到一个单独的 chunk 中。

    Tip:

    ES2015 Loader 规范 定义了 import() 方法,可以在运行时动态地加载 ES2015 模块。

    if (module.hot) {
      import('lodash').then((_) => {
        // Do something with lodash (a.k.a '_')...
      });
    }

    Warning:

    import() 特性依赖于内置的 Promise。如果想在低版本浏览器中使用 import(),记得使用像 es6-promise 或者 promise-polyfill 这样 polyfill 库,来预先填充(shim) Promise 环境。

    import() 中的表达式

    不能使用完全动态的 import 语句,例如 import(foo)。是因为 foo 可能是系统或项目中任何文件的任何路径。

    import() 必须至少包含一些关于模块的路径信息。打包可以限定于一个特定的目录或文件集,以便于在使用动态表达式时 - 包括可能在 import() 调用中请求的每个模块。例如, import(`./locale/${language}.json`) 会把 .locale 目录中的每个 .json 文件打包到新的 chunk 中。在运行时,计算完变量 language 后,就可以使用像 english.json 或 german.json 的任何文件。

    // 想象我们有一个从 cookies 或其他存储中获取语言的方法
    const language = detectVisitorLanguage();
    import(`./locale/${language}.json`).then((module) => {
      // do something with the translations
    });

    Tip:

    使用 webpackInclude and webpackExclude 选项可让你添加正则表达式模式,以减少 webpack 打包导入的文件数量。

    Magic Comments

    内联注释使这一特性得以实现。通过在 import 中添加注释,我们可以进行诸如给 chunk 命名或选择不同模式的操作。

    // 单个目标
    import(
      /* webpackChunkName: "my-chunk-name" */
      /* webpackMode: "lazy" */
      /* webpackExports: ["default", "named"] */
      'module'
    );
    
    // 多个可能的目标
    import(
      /* webpackInclude: /\.json$/ */
      /* webpackExclude: /\.noimport\.json$/ */
      /* webpackChunkName: "my-chunk-name" */
      /* webpackMode: "lazy" */
      /* webpackPrefetch: true */
      /* webpackPreload: true */
      `./locale/${language}`
    );
    import(/* webpackIgnore: true */ 'ignored-module.js');

    webpackIgnore:设置为 true 时,禁用动态导入解析。

    Warning:

    注意:将 webpackIgnore 设置为 true 则不进行代码分割。

    webpackChunkName: 新 chunk 的名称。 从 webpack 2.6.0 开始,占位符 [index] 和 [request] 分别支持递增的数字或实际的解析文件名。 添加此注释后,将单独的给我们的 chunk 命名为 [my-chunk-name].js 而不是 [id].js。

    webpackMode:从 webpack 2.6.0 开始,可以指定以不同的模式解析动态导入。支持以下选项:

    webpackPrefetch:告诉浏览器将来可能需要该资源来进行某些导航跳转。

    webpackPreload:告诉浏览器在当前导航期间可能需要该资源。

    webpackInclude:在导入解析(import resolution)过程中,用于匹配的正则表达式。只有匹配到的模块才会被打包。

    webpackExclude:在导入解析(import resolution)过程中,用于匹配的正则表达式。所有匹配到的模块都不会被打包。

    webpackExports: 告知 webpack 只构建指定出口的动态 import() 模块。它可以减小 chunk 的大小。从 webpack 5.0.0-beta.18 起可用。

    【相关推荐:javascript学习教程

    以上就是webpack支持es6吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:webpack ES6
    上一篇:es6新增运算符有哪些 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • Webpack是什么?详解它是如何工作的?• webpack怎么将es6转成es5的模块• vue webpack可打包哪些文件• webpack4 react报错怎么办• es6怎么删除数组中的某一项• es5和es6怎么实现数组去重
    1/1

    PHP中文网