zoukankan      html  css  js  c++  java
  • 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。

  • 相关阅读:
    1.27
    1.25
    Representation Learning with Contrastive Predictive Coding
    Learning a Similarity Metric Discriminatively, with Application to Face Verification
    噪声对比估计(负样本采样)
    Certified Adversarial Robustness via Randomized Smoothing
    Certified Robustness to Adversarial Examples with Differential Privacy
    Dynamic Routing Between Capsules
    Defending Adversarial Attacks by Correcting logits
    Visualizing Data using t-SNE
  • 原文地址:https://www.cnblogs.com/natsu07/p/7267330.html
Copyright © 2011-2022 走看看