parcel环境配置和san起步

psychola 发布于2019-08-22 16:57 / 1819人阅读

背景

学习一下parcel打包工具，并做笔记整理。方便查看。

安装node

https://nodejs.org/zh-cn/ 根据版本自行下载

安装好之后在终端中输入node -v 检查是否安装成功

淘宝NPM镜像

在终端中输入 npm install -g cnpm --registry=https://registry.npm.taobao.org

搭建parcel环境

npm install -g parcel-bundler 全局安装parcel

创建一个文件夹并在终端中cd到这个文件夹中

执行npm init 创建package.json，记录项目所需要的依赖

创建.gitignore用来忽略文件

打开项目中的package.json文件

找到scripts对象，在其中添加"dev": "rd/s/q dist & parcel index.htm" //通过npm run
dev 执行

parcel index.html命令

创建index.sass 文件并在其写入样式

在终端中输入npm install node-sass -g 安装sass模块

创建index.html和index.js文件，将index.js引进index.html，将index.sass引进index.js中

执行 npm run dev命令

找到scripts对象，在其中添加"build": "rd/s/q build & parcel build index.html -d
build --public-url ./" //通过npm run dev 执行parcel index.html命令

san的配置

创建一个文件夹并在终端中cd到这个文件夹

npm init //初始化项目根目录

npm install san --save //安装san

npm install babel-preset-env --save-dev //安装babel

打开项目中的package.json文件，找到scripts对象

"dev": "parcel index.html" //创建dev命令

"build": "parcel build index.html -d build --public-url ./"
//创建build命令

创建index.html文件和src目录，并在src目录下创建main.js

在main.js写入 import san from "san" //导入san

san的起步

//定义一个组件，并初始化模版和数据
var MyApp = san.defineComponent({
    template: "Hello {{name}}!",
    initData: function () {
        return {
            name: "San"
        };
    }
});
//初始化组件对象
var myApp = new MyApp();
//让组件在body中渲染
myApp.attach(document.body);

GPU云服务器云服务器 san和分布式存储 iis7和iis8如何配置asp运行环境起步 Parcelable

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94715.html

2018前端值得关注的技术

摘要：年前端有哪些领域，技术值得关注，哪些技术会兴起，哪些技术会没落。自从谷歌提出后，就持续的获得了业界的关注，热度可见一斑。就在今年，谷歌也宣布将获得与安卓原生应用同等的待遇与权限。但是无论都值得关注。 1.前言 2017悄然过去，2018已经来到。人在进步，技术在发展。2018年前端有哪些领域，技术值得关注，哪些技术会兴起，哪些技术会没落。下面就我个人的判断进行一个预测判断，希望能对大家...

xiao7cn 2019-08-29 14:12 评论0 收藏0
2018前端值得关注的技术

摘要：年前端有哪些领域，技术值得关注，哪些技术会兴起，哪些技术会没落。自从谷歌提出后，就持续的获得了业界的关注，热度可见一斑。就在今年，谷歌也宣布将获得与安卓原生应用同等的待遇与权限。但是无论都值得关注。 1.前言 2017悄然过去，2018已经来到。人在进步，技术在发展。2018年前端有哪些领域，技术值得关注，哪些技术会兴起，哪些技术会没落。下面就我个人的判断进行一个预测判断，希望能对大家...

用户84 2019-08-21 18:42 评论0 收藏0
Parcel - 极速零配置Web应用打包工具

摘要：极速零配置应用打包工具的优势极速打包时间使用进程去启用多核编译。的缺点缺乏插件新出的打包工具，还在成长当中，插件的数量和这种成熟的工具是无法相比的。不太适合大项目毕竟配置，无需过多的配置即可使用。 showImg(https://segmentfault.com/img/remote/1460000012593231); 开发项目或者写 demo 的时候，还在为 webpack 的配置...

fireflow 2019-08-21 18:24 评论0 收藏0
RAKsmart新增弹性云服务器首推硅谷机房可选优化/精品/CN2线路

RAKsmart 商家对于我们很多站长朋友不算陌生，从早期只有美国自营圣何塞机房的独立服务器产品，再到如今有提供中国香港、日本、美国硅谷、洛杉矶、韩国、新加坡、荷兰等多个数据中心的大带宽服务器、站群服务器、高防服务器，以及还有对应机房的便宜VPS主机，可谓说产品线拉的还是很开的。实际上老蒋之前也有介绍到 RAKsmart 商家在7月份的时候开始尝试新增设的云服务器产品，毕竟传统的VPS主机...

233jl 2021-08-05 10:00 评论0 收藏0
原创全新打包工具Parcel零配置VueJS开发脚手架

摘要：一个基于打包工具的急速开发脚手架解决方案强烈建议使用以上项目地址初始化项目安装依赖其中是主要的工具，对于结尾的单文件，需要单独处理文件类型，这个插件会通过来生成对应的代码，会自动加载开头的依赖。 parcel-vue 一个基于Parcel打包工具的 VueJS急速开发脚手架解决方案,强烈建议使用node8.0以上项目地址: https://github.com/w3c-king/p....

testHs 2019-08-21 18:45 评论0 收藏0