创建项目
-
创建项目目录
首先新建一个文件夹，这里存放着我们的项目。
-
创建项目文件
这里不使用任何项目模板，相当于使用空模板。
进入这个文件夹，再cmd中运行npm init。
然后按照提示输入package name,项目名等等。每输入一个就回车。完成之后目录下会出现一个package.json项目文件。
我们到vscode中打开这个目录
-
创建项目入口文件
按照package.json的提示，我们需要创建index.js。一般都是放在src文件夹下。于是我们创建这个路径。
如果是需要在浏览器中运行项目，可以再创建一个index.html，并添加入口js引用
-
添加依赖引用
假如我们的需求是要用jquery操作dom
添加依赖的方式是命令行中执行npm i jquery。这会将包的引用添加到项目文件
{
"name": "npm-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.7.1"
}
}
- 使用自定义模块
添加repeat.js文件
export default{
repeat:function(str){
return `${str},${str}`
}
}
再使用这个模块
import rmodule from "./repeat"
$("body").append($(`<h1 style="color:lightgreen">${rmodule.repeat("Hello jquery")}</h1>`))
- 使用添加的包
在index.js中使用import导入包，然后使用jquery
import rmodule from "./repeat"
import $ from "jquery"
$("body").append($(`<h1 style="color:lightgreen">${(()=>"Hello jquery")()}</h1>`))
$("body").append($(`<h1 style="color:lightgreen">${rmodule.repeat("Hello jquery")}</h1>`))
由于import $ from "jquery"中"jquery"不是真实路径，所以还需要编译项目。
编译项目
1.babel编译器
- 添加编译器
在命令行中运行npm install -D @babel/core @babel/cli @babel/preset-env，这将会添加一个叫babel的es6编译器到开发时依赖中。
{
"name": "npm-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.24.5",
"@babel/core": "^7.24.5",
"@babel/preset-env": "^7.24.5"
},
"dependencies": {
"jquery": "^3.7.1"
}
}
- 添加编译器的配置文件
在项目的根目录下创建一个命名为babel.config.js的配置文件
const presets = [
[
"@babel/preset-env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
useBuiltIns: "usage",
corejs: "3.6.4",
},
],
];
module.exports = { presets };
- 编译项目
在项目文件中添加此命令"scripts": {"build": "babel src --out-dir lib"}
{
"name": "npm-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src --out-dir lib"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.24.5",
"@babel/core": "^7.24.5",
"@babel/preset-env": "^7.24.5"
},
"dependencies": {
"jquery": "^3.7.1"
}
}
然后运行此命令npm run build，使用babel编译器,将src目录中的文件编译为es2015，输出到lib目录。
- 评价
就编译结果看。babel扫描了src目录下的所有js文件，但只进行了源代码编译，和源码的链接。也就说只做了编译器的功能，没有做依赖包的链接的工作。真是服了!
2.使用webpack
为了解决这个问题，我们换成webpack
运行命令npm install -D webpack webpack-cli添加开发时依赖。同时添加pack命令
{
"name": "npm-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src --out-dir lib",
"pack": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.24.5",
"@babel/core": "^7.24.5",
"@babel/preset-env": "^7.24.5",
"webpack": "^5.91.0",
"webpack-cli": "^5.1.4"
},
"dependencies": {
"jquery": "^3.7.1"
}
}
- 添加webpack配置文件
在根目录下添加webpack.config.js配置文件
const path=require("path");
module.exports={
mode:"development",
entry:"./src/index.js",
output:{
filename:"dist.js",
path:path.resolve(__dirname,"dist")
}
}
- 编译
运行命令npm run pack。根目录下出出现打包的文件。jquery也被连接到了最终的文件中。
运行项目
将index.html的js链接换一下
<!DOCTYPE html>
<html>
<header>
<title>入口HTML</title>
</header>
<!-- <script type="module" src="./src/index.js"></script> -->
<script type="module" src="./dist/dist.js"></script>
<body>
<h1>
Hello World
</h1>
</body>
</html>
然后用live server扩展在此文件上运行一个web服务器
