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);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值