浅谈前端js面试--开发环境-模块化--commonjs

• nodejs模块化规范，现在被大量用前端，原因：效率高，简洁
• 前端开发依赖的插件和库，都可以从npm中获取
• 构建工具的高度自动化，使得使用Npm的成本非常低
• commonjs不会异步加载js,而是同步一次性加载出来

使用commonjs

Paste_Image.png

• 需要构建工具支持
• 一般和npm一起使用

AMD和commonjs使用场景

• 需要异步加载，使用AMD
• 使用了npm之后建议使用commonjs

构建工具

• grunt

• gulp

• webpack

  • pwd 进入当前目录
  • ll 查看当前目录
  • npm instal http-server -g
  • http-server -p 8881(只能浏览静态网页)

• 安装webpack

  • npm init
  • npm install webpack --save-dev(只用于开发环境)或指定版本npm install --save-dev [email protected]
  • 安装jquery
    • npm install jquery --save

Paste_Image.png

- 卸载 npm uninstall moment --save

packge.json文件就是包的一个配置，npm把webpack目录当成一个包
--save-dev save是将webpack保存起来 -dev是保存起来后只用于开发环境

• 配置webpack
  • webpack.config.js
  • index.html中引入bundle.js

    sdf
  

npm start(运行命令，要现在packge.json中配置)
"start": "webpack"
webpack版本的问题
如果webpack使用的1.x的版本，那么webpack-dev-server也要使用1.x的版本，否则会报如下错误：Connot find module 'webpack/bin/config-yargs'。
这时候，应该怎么解决呢？
notice:若报各种模块错误，是webpack版本问题，升级一下就好了
将webpack1升级为webpack2的一些总结

• 使用jquery

  var $=require('jquery')
  var $root=$('#root')
  $root.html("在app.js入口文件中引用jquery")
  

• //压缩js webpack.config.js

    plugins: [
      new webpack.optimize.UglifyJsplugin()
    ]
  

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2034201-ce917020299efba3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)