h-music-开发笔记-1

创建文件

手动创建h-music文件夹
npm init -y创建package.json文件夹
npm install --save-dev parcel-bundler下载pacle打包工具 --创建了package-lock.json和node_modules
parcle可以去读parcel文档，两三分钟就可以学会了
创建并填充index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>h-music</title>
    <link rel="stylesheet" href="src/scss/index.scss">
</head>

<body>
    <h1>h-music</h1>
    <script src="src/javascript/index.js"></script>
    <p>www</p>
    
</body>
</html>

手动创建src及下级文件

index.scss:

// 定义颜色变量
// 这些代码浏览器是不懂的，所以不能直接在浏览器打开，需要parcel将代码变成css，放到.cache文件夹里。在浏览器里看到的是处理过的代码。
$color:#ff00ff;
$color2:#ffaa33;
// body里面的color的是$color
body{
    color: $color;
    p{
        color: $color2;
    }
}

index.js:

console.log('hello www');

执行npx parcel index.html命令。因为不是全局安装的pacel 这个命令将 node_modules 的可执行目录加到 PATH 中，当我们执行 npx parcel index.html 时，会自动去./node_modules/.bin目录下搜索。此时会启动一个测试服务器，运行index.html文件，并给出链接。打开链接即可看到页面。

如果需要发布上线，需要执行这个命令，build完成后会产生这些文件：

目录简介

.cache放的是parcel处理过后的代码文件，为了能让浏览器看懂
dist放的是parcel build后构建的文件。我们发布上线的是dist目录下的代码

dist/index.html是任意服务器都能用的。比如使用http-server服务器：

> cd dist 
> http=server 
//  打开http://10.220.50.159:8080就可以看到我们写的页面

dist里的.map文件可以帮助我们在控制台定位到对应源码

node_modules是执行 npm install --save-dev parcel-bundler下载pacle打包工具时创建的，用来存放用包管理工具（parcel）下载安装的包
src是用来放我们写的源码的

src/javascript 用来放js文件
src/scss 用来放scss（css）文件
src/svg 用来放svg文件

package-lock.json&package.json:根据官方文档，package-lock.json 是生成的系统当前安装的库的具体来源和版本号，锁定版本。当你执行npm install的时候， node会先从package.json文件中读取所有dependencies信息，然后根据dependencies中的信息与node_modules中的模块进行对比，没有的直接下载，node是从package.json文件读取模块名称，从package-lock.json文件中获取版本号，然后进行下载或者更新。当package.json与package-lock.json都不存在，执行"npm install XXXX"时，node会重新生成package-lock.json文件，然后把node_modules中的模块信息全部记入package-lock.json文件。但不会生成package.json文件。但是，你可以通过"npm init --yes"来生成package.json文件