• Webpack打包方式及各场景下模块化语法总结


    1.nodejs的方式:commonjs  var xx =require()   modules.exports=xxxx

           注意:这种方式引入模块,路径会遵循node的规则,和js的src路径规则不同。

      规则参考:http://www.ruanyifeng.com/blog/2015/05/require.html

    2.ES6的import和export关键字 和commonjs等价,会被babel转换成方式1

    3.AMD方式: require([依赖],function(注入){   })

    4.CMD 和commonjs差不多

    webpack可以识别以上所有模块载入方式,同时还有自带的require.ensure()  以及webpack2又有import( ) 方法

    总之,这都是为了打包文件的。使用commonjs的1方式,这些文件被打包在一个总的js文件里,如果想单独打包,要使用AMD方式或者commonjs异步的方式或者自带的方式。

    babel仅仅将es6的import语法转译成commonjs的require语法,真正对语句操作的是webpack,如果不安装webpack,会报错method require is undefined.

    其次,webpack可以识别并转换尾缀为vue的文件。vue文件又叫单文件组件,优点是可以把js和html和css放在一个文件中,并且html可以直接以html的形式书写,而不是在组件的js中拼接字符串。需要webpack+vue-loader进行处理。

    vue-cli干了什么:既然vue需要搭配webpack打包干活,于是就有了vue-cli,是一个带有配置webpack(或者相似功能的browserify)的vue脚手架(完整的项目目录,以及package.json脚本配置等)

    vuex是干什么的:和上面没有关系,vuex是让组件更好通信的,管理共用的状态。

    vue组件:两种创建方式分别是全局和局部。注意传入vue.extend()返回的构造器,或直接传入options对象都是可以的,后者会默认调用vue.extend()

    注意组件的data必须是一个函数(为了避免data被共用)

    关于package.json  npm start = npm run start的缩写  其实npm run后面跟的字段主要取决于package.json文件中scripts下的配置,它是一个命令的快捷运行方式,必须配置"start" : node ./app.js 才可以使用npm run启动。同样也可以配置dev然后用npm run dev启动

    在package.json的脚本中的命令是自带环境变量的,比如webpack命令会自动去找项目目录下node_modules下本地安装的webpack,而如果在命令行中调用又如果没有全局安装webpack,必须要带上webpack在项目文件夹中的路径,才能调用webpack。

  • 相关阅读:
    【创建型】Singleton模式
    【创建型】Abstract Factory模式 & Factory Method模式
    红黑树插入操作
    红黑树删除操作
    bat命令中的变量声明及使用
    bat(传参情况下)取得当前bat所在的目录路径
    代理模式 -- 大话设计模式
    装饰模式 -- 大话设计模式
    依赖倒转原则 -- 大话设计模式
    开放封闭原则 -- 大话设计模式
  • 原文地址:https://www.cnblogs.com/natsu07/p/7267330.html
Copyright © 2020-2023  润新知