html中用npm包

一.用webpack工具打包npm包 到dist下js文件为浏览器能识别的文件
1.创建一个文件夹
html中引用打包后的js文件
注意打包后的js文件是局部变量 如果要在html中引入js中的变量先去js中把变量改成全局变量
2.先初始化一个管理包的文件：输入npm命令 “npm init -y
3.输入npm命令安装webpack及webpack-cli， “npm i webpack webpack-cli -D”，然后回车进行下载/安装 。其中-D表明这两个包是开发依赖包。
4.在src文件夹下创建一个index.js文件，先随便输入一些内容(或者可以使要使用的npm包的代码复制到这里)
5.打开package.json,进行一些打包的配置
或者直接运行命令
npx webpack --entry=./index.js --output-filename=bundle.js --mode=development

在输入开发模式： npx webpack ./src/main.js --mode=development

在输入生产模式： npx webpack ./src/main.js --mode=production

"scripts": {
	//"build": "webpack 要打包的入口文件路径 --output 出口文件 --mode production
    "build":  "build": "webpack ./src/index.js --output ./dist/bundle.js --mode production"
 },

当配置项比较多的时候我们直接在package.json的脚本里面直接写会不太方便，所以在根目录下面创建一个webpack.config.js文件专门用来配置webpack

//引入path
const path = require('path')
module.exports = {
  //入口:都使用绝对路径
  entry: path.join(__dirname, './src/index.js'),
  //出口
  output: {
    //目录
    path: path.join(__dirname, './dist'),
    //文件名
    filename: 'bundle.js',
  },
  //发布模式(会压缩代码)
  mode: 'production',
}

–package.json

 "scripts": {
    "build": "webpack --config webpack.config.js"
  },

终端中输入命令 “npm run build” ，同样也可以打包成功

注意:打包后的js文件中的变量 类名 方法名称等都是局部变量 要直接使用需改成全局变量

(function (形参) {
  
})(实参);

那么如何把局部变量变成全局变量?

(function (win) {
  var num=10;//局部变量
  //js是一门动态类型的语言,对象没有属性,点了就有了
  win.num=num;
})(window);
console.log(num);