鱼C论坛

 找回密码
 立即注册
查看: 2923|回复: 0

[学习笔记] es6语法之模块化

[复制链接]
发表于 2017-7-12 06:10:44 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
老的js语法没有引入模块这种概念,只能从网页上引入许多js文件,使得全局变量都被污染了,十分不利于做大的项目。es6除了模块的这个概念,为了实现他我们需要安装额外的插件‘webpack’。
首先用npm进行全局安装
  1. npm install webpack -g
复制代码

然后在我们的工作目录下安装依赖项
  1. npm install webpack --save-dev
复制代码

接着要新建配置文件webpack.config.js,在文件里写入
  1. module.exports={
  2.         entry:__dirname+'/output/bianliang.js',
  3.         output:{
  4.                 path:__dirname,
  5.                 filename:'webpack.js'
  6.         }
  7. }
复制代码

entry是入口文件,output是生成的文件,我们把用es6语法写成的文件先用babel翻译成es5语法,然后直接在目录里输入
  1. webpack
复制代码
就会自动打包为一个文件了。
现在我完成一下这个步骤,首先在input目录下新建一个模块文件script.js,写入以下代码
  1. module.exports='你好'
复制代码

然后在input文件夹下bianliang.js文件里写入
  1. const a=require('./script')
  2. document.write(a)
复制代码

接着在用原来的方法运行babel进行编译,然后输入webpack进行打包,自动生成webpack.js文件
  1. /******/ (function(modules) { // webpackBootstrap
  2. /******/         // The module cache
  3. /******/         var installedModules = {};
  4. /******/
  5. /******/         // The require function
  6. /******/         function __webpack_require__(moduleId) {
  7. /******/
  8. /******/                 // Check if module is in cache
  9. /******/                 if(installedModules[moduleId]) {
  10. /******/                         return installedModules[moduleId].exports;
  11. /******/                 }
  12. /******/                 // Create a new module (and put it into the cache)
  13. /******/                 var module = installedModules[moduleId] = {
  14. /******/                         i: moduleId,
  15. /******/                         l: false,
  16. /******/                         exports: {}
  17. /******/                 };
  18. /******/
  19. /******/                 // Execute the module function
  20. /******/                 modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  21. /******/
  22. /******/                 // Flag the module as loaded
  23. /******/                 module.l = true;
  24. /******/
  25. /******/                 // Return the exports of the module
  26. /******/                 return module.exports;
  27. /******/         }
  28. /******/
  29. /******/
  30. /******/         // expose the modules object (__webpack_modules__)
  31. /******/         __webpack_require__.m = modules;
  32. /******/
  33. /******/         // expose the module cache
  34. /******/         __webpack_require__.c = installedModules;
  35. /******/
  36. /******/         // define getter function for harmony exports
  37. /******/         __webpack_require__.d = function(exports, name, getter) {
  38. /******/                 if(!__webpack_require__.o(exports, name)) {
  39. /******/                         Object.defineProperty(exports, name, {
  40. /******/                                 configurable: false,
  41. /******/                                 enumerable: true,
  42. /******/                                 get: getter
  43. /******/                         });
  44. /******/                 }
  45. /******/         };
  46. /******/
  47. /******/         // getDefaultExport function for compatibility with non-harmony modules
  48. /******/         __webpack_require__.n = function(module) {
  49. /******/                 var getter = module && module.__esModule ?
  50. /******/                         function getDefault() { return module['default']; } :
  51. /******/                         function getModuleExports() { return module; };
  52. /******/                 __webpack_require__.d(getter, 'a', getter);
  53. /******/                 return getter;
  54. /******/         };
  55. /******/
  56. /******/         // Object.prototype.hasOwnProperty.call
  57. /******/         __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  58. /******/
  59. /******/         // __webpack_public_path__
  60. /******/         __webpack_require__.p = "";
  61. /******/
  62. /******/         // Load entry module and return exports
  63. /******/         return __webpack_require__(__webpack_require__.s = 0);
  64. /******/ })
  65. /************************************************************************/
  66. /******/ ([
  67. /* 0 */
  68. /***/ (function(module, exports, __webpack_require__) {

  69. "use strict";


  70. var a = __webpack_require__(1);
  71. document.write(a);

  72. /***/ }),
  73. /* 1 */
  74. /***/ (function(module, exports, __webpack_require__) {

  75. "use strict";


  76. module.exports = '你好';

  77. /***/ })
  78. /******/ ]);
复制代码

这里面乱七八糟的代码不用管,直接新建个html文件,把它引入网页就可以显示‘你好’了。

评分

参与人数 1荣誉 +4 鱼币 +4 收起 理由
小甲鱼 + 4 + 4 支持楼主!

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 22:47

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表