parcel环境配置和san起步

背景

学习一下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: '<p>Hello {{name}}!</p>',
    initData: function () {
        return {
            name: 'San'
        };
    }
});
//初始化组件对象
var myApp = new MyApp();
//让组件在body中渲染
myApp.attach(document.body);