ES6的模块化开发

webpack打包与模块化开发

前言：ES6支持js的模块化新的语法，可以用来构建复杂的WEB应用,Node.js则提供了另外一种方式，专用的 CommonJS 模块

CommonJS 模块模块化

//1.定义一个需要导出的方法
exports.hello = function(){
    document.write("hello,world!");
}

//2.在另一个js文件中引入方法
var sayHi = require("./hello");
sayHi.hello();

• 打包webpack为一个js文件，可兼容任意浏览器

  1. 先安装webpack-cli，使用命令：npm install webpack-cli -g 进行全局安装

  2. 两种打包方式：一种是直接打包webpack，第二种可以监听文件的改动实时进行打包webpack --watch,实现热部署

  3. 创建webpack.config.js文件,进行配置

     module.exports = {
       // 规定了入口函数，即从哪里开始
       entry: './modules/main.js',
       // 进行输出配置
       output: {
         // 整合的文件要保存到哪里
         filename:"./js/bundle.js"
       }
     };
     

ES6新语法

export default{
  hello(){
    document.write("你好，世界")
  },
  name:"薛定谔的猫"
}

import hello from "./hello";  //
hello.hello();
alert(hello.name);