h-music-开发笔记-1

·  阅读 158
h-music-开发笔记-1

创建文件

  1. 手动创建h-music文件夹

  2. npm init -y创建package.json文件夹

  3. npm install --save-dev parcel-bundler下载pacle打包工具 --创建了package-lock.json和node_modules

  4. parcle可以去读parcel文档,两三分钟就可以学会了 image.png

  5. 创建并填充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>
复制代码
  1. 手动创建src及下级文件 image.png

index.scss:

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

index.js:

console.log('hello www');
复制代码
  1. 执行npx parcel index.html命令。因为不是全局安装的pacel 这个命令将 node_modules 的可执行目录加到 PATH 中,当我们执行 npx parcel index.html 时,会自动去./node_modules/.bin目录下搜索。image.png 此时会启动一个测试服务器,运行index.html文件,并给出链接。打开链接即可看到页面。

image.png

  1. 如果需要发布上线,需要执行这个命令,build完成后会产生这些文件: image.png

目录简介

  • .cache放的是parcel处理过后的代码文件,为了能让浏览器看懂
  • dist放的是parcel build后构建的文件。我们发布上线的是dist目录下的代码
  1. dist/index.html是任意服务器都能用的。比如使用http-server服务器:
> cd dist 
> http=server 
//  打开http://10.220.50.159:8080就可以看到我们写的页面
复制代码
  1. dist里的.map文件可以帮助我们在控制台定位到对应源码
  • node_modules是执行 npm install --save-dev parcel-bundler下载pacle打包工具时创建的,用来存放用包管理工具(parcel)下载安装的包
  • src是用来放我们写的源码的
  1. src/javascript 用来放js文件
  2. src/scss 用来放scss(css)文件
  3. 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文件
分类:
前端
收藏成功!
已添加到「」, 点击更改