利用parcel进行打包-html,sass,js

最新推荐文章于 2024-05-08 10:21:53 发布

China_chen_p_l

最新推荐文章于 2024-05-08 10:21:53 发布

阅读量1.9k

点赞数

分类专栏：打包文章标签： parcel nodejs web sass

本文链接：https://blog.csdn.net/china_chen_p_l/article/details/79858075

版权

打包专栏收录该内容

2 篇文章 0 订阅

订阅专栏

node安装

npm install babel-preset-env -D

npm install parcel-bundler -D

在根目录下新建.babelrc配置文件

{
  "presets": [
    "env"
  ]
}

安装rimraf依赖，为了可以使用rm命令，也就是删除文件

npm install rimraf -D

在package.json中

{
  "name": "parcel",
  "version": "1.0.0",
  "description": "parcel",
  "main": "index.js",
  "scripts": {
    "start":"parcel index.html"

    "build":"rm -rf dist && parcel build src/index.html --no-cache -d dist --public-url / "
  },
  "keywords": [
    "parcel"
  ],
  "author": "aaron",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "parcel-bundler": "^1.2.0",

    "rimraf": "^2.6.2"
  }
}

"srcipts"属性下的build命令，rm -rf dist 是rimraf依赖中提供的rm -rf命令后面dist是要删除的文件名称

parcel build src/index.html 是在将src/index.html进行打包

--no-cache -d dist 是不用缓存直接将打包好的文件放到dist文件夹中

--public-url / 就相当于资源的引用路径为根路径

eg：

src/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>预告片</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
    <script type="text/javascript" src="./index.js"></script>
</body>
</html>

安装sass所需要的配置依赖

npm install cssnext node-sass  autoprefixer -D

在根目录新建依赖配置文件postcss.config.js

module.exports = {
	plugins: [
		/* 自动加前缀 */
		require('autoprefixer'),
		require('cssnext')
	]
}

src/assets/common.sass

#app
	width: 100%
	height: 100%
	overflow: hidden

src/index.js

import './assets/common.sass'

function changeTitle() {
	window.$('#app').html('预告片')
}

setTimeout(function () {
	changeTitle()
}, 2000)

执行npm run build命令（我是在git环境下执行命令的）

打包成功 dist目录下

自动将sass编译成css

China_chen_p_l

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用parcel进行打包-html,sass,js

node安装npm install babel-preset-env -Dnpm install parcel-bundler -D在根目录下新建.babelrc配置文件{ "presets": [ "env" ]}安装rimraf依赖，为了可以使用rm命令，也就是删除文件npm install rimraf -D在package.json中{ "name": "parcel...
复制链接

扫一扫