模块化、导入/导出

var moduleA = (function(){
  // 1.导出的对象
  var obj = {};
  var flag = true;
  if(flag){
    console.log("哈哈哈")
  }
  function sum(num1,num2){
    return num1+num2;
  }
  obj.flag = flag;
  obj.sum = sum;
  return obj;
})()

• export/import
  1.type改为module后，就有了自己的作用域，变量名就不会和其他js文件里的命名冲突，但是也导致了其他js模块无法访问，所以需要export导出

 <script src="xiaoming.js" **type='module'**></script>
  <script src="xiaoming2.js" type='module'></script>

//xiaoming.js
  var flag = true;
  if(flag){
    console.log("哈哈哈")
  }
  function sum(num1,num2){
    return num1+num2;
  }
  **export{
    flag,sum
  }**

//xiaoming2.js
import{flag,sum} from "./xiaoming.js"
if(flag){
  console.log("小明是天才");
  console.log(sum(40,50))
}

• 导出方式二

 export var height = 1.88;

• 导出函数/类

  export function mul(num1,num2){
    return num1*num2;
  }

export class Person{ 
    run(){
      console.log('在奔跑');
    }
  }
  

import{Person} from "./xiaoming.js"
const p = new Person();
p.run();

• export default 能够让导入者自己来命名；在同一个模块中只能有一个！

 const address='北京市';
  export default address;

import addr from "./xiaoming.js"
console.log(addr);

• 全部导入

import * as aaa from './xiaoming.js';
console.log(aaa.flag);

• webpack的使用

//info.js
function add(n1,n2){
return n1+n2;
}
function mul(n1,n2){
  return n1*n2;
  }
  //commonjs导出
module.exports = {add,mul}

//ES6导出
export const name = 'zjh';
export const age = 18;
export const height=1.88;

//main.js

// 使用commonjs的模块化规范
const {add,mul}  = require('./mathUtils.js')
console.log(add(1,3));
console.log(mul(19,10));
// 使用ES6的模块化规范
import {name,height,age} from './info'

console.log(name);
console.log(height);
console.log(age);

• 执行 打包命令
  webpack .\src\main.js .\dist\bundle.js
• index.html只要引入bundle.js即可
• 在终端执行webpack 使用的是全局的版本，./node_modules/.bin/webpack 使用的是本地的
• 
• webpack 跟vue

import Vue from 'vue';
const App = {
  template:`
    <div>
      <h2>{{message}}</h2>
      <button @click="show">按钮</button>
    </div>
  `,
  data(){
    return {
      message:'Love you', 
      thanksEx:'thanks!',
    }
  },
  methods:{
    show(){
      console.log(this.thanksEx);
    },
  }
}
const app = new Vue({
  el:'#app',
  template:`<App/>`,
  components:{
    App,
  }
})

• webpack.config.js

const path = require('path')

module.exports = {
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js',
    // 解析url时加上dist/
    publicPath:'dist/'
  },
  module: {
    rules: [
      // 正则表达式
      { test: /\.css$/, 
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时，是从右向左
        use: ['style-loader','css-loader'] 
      },
      {
        test: /\.less$/,
        use: [{
            loader: "style-loader"
        }, {
            loader: "css-loader"
        }, {
            loader: "less-loader"
        }]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 24000,
              // 解析后图片的路径和文件名
              name:'img/[name].[hash:8].[ext]'
            },
            
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
    ]
  },
  resolve:{
    alias:{
      'vue$':'vue/dist/vue.esm.js'
    }
  }
}

• export default 变量
• import 变量 from 文件路径 (default的导出在import时不用加{}
• 或者

//main.js
import Vue from 'vue';
import App from './vue/app'
const app = new Vue({
  el:'#app',
  template:`<App/>`,
  components:{
    App,
  }
})

//app.js
export default {
    template:`
      <div>
        <h2>{{message}}</h2>
        <button @click="show">按钮</button>
      </div>
    `,
    data(){
      return {
        message:'Love you', 
        thanksEx:'thanks!',
      }
    },
    methods:{
      show(){
        console.log(this.thanksEx);
      },
    }
}

• 手动把package.json中的某npm包版本改了之后，要执行npm install重新安装
• 在vscode终端执行的命令都是从全局找的，如果要在局部找，需要在package.json的scripts属性设置
• 使用webpack,vue-cli前得安装Vue-cli
• npm ：nodeJS模块包管理和分发工具