您的位置:金沙手机版下载 > 澳门官网 > 常见技术栈的集成方式

常见技术栈的集成方式

2019-10-14 12:30

前言

Parcel 是什么

Parcel 是三个前端营造工具,Parcel 官网 将它定义为极速零配置的Web应用打包工具。没有错,又是四个营造筑工程具,你势必会想,为啥前端的营造筑工程具不可胜举,搞那么多工具又要花时间去学习,真的有含义呢?在 webpack 已经成为前端营造筑工程具主流的前些天,叁个新的工具能有何样优势来站稳脚跟呢?

怎么要用 Parcel

多个好的包裹工具在前端工程中占着比较关键的身份。然,何谓之好?或成效强盛,或简捷易用,或进步功用,或符合自个儿。在一时不断前行中,贰个个好的工具正在被三个越来越好的工具所取代。随着对 webpack 复杂配置的嘲弄声越来越多,Parcel 打着 "飞速、零配置" 的旗子出来了。

Parcel 的特性

  • 敏捷打包:启用多核编写翻译,并有所文件系统缓存
  • 装进全部财富:协助JS,CSS,HTML,文件财富等等 - 无需设置任何插件
  • 机动调换:使用 Babel,PostCSS 和 PostHTML 自动调换
  • 零配置代码拆分:使用动态 import() 语法拆分你的输出包,只加载开头加载时所需的内容
  • 模块热替换:无需开展另外配置
  • 友好的谬误记录:以语法高亮的花样打字与印刷的代码帧,以帮扶您考查难题

什么使用

快快利用

全局安装 npm i parcel-bundler -gyarn add parcel-bundler global

Parcel 使用二个文件作为入口,最棒是 HTML 或 JavaScript 文件,我们在品种中新建 index.html 文件,直接运营命令 parcel index.html 就能够运维本地服务器

在浏览器中拜会 ,可以透过 parcel index.html -p 8888 重新安装端口号。

不用配置文件!

Parcel 扶植 CommonJS 模块语法、ES6 模块语法、在 js 文件中程导弹入 node 模块或 css、在 css 中采纳 import 等,也都无需配备文件!

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Parcel</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>Hello Parcel</h1>
        <script src="src/js/index.js"></script>
    </body>
</html>

// src/js/index.js

const main1 = require('./main1.js');    // 支持 CommonJS 模块语法
import main2 from './main2.js';         // 支持 ES6 模块语法
import '../css/index.css';              // 支持在 js 中导入 css

main1();
main2();

地点只是简短的使用了 Parcel,但在实际上项目中,大家会用到各个技能栈,上边我们来拜谒 Parcel 如何集成各个手艺栈的。

瞩目:Parcel 里应用了 async await,由此须要 node 7.6 以上的本子才支撑

集成本领栈

先是在档次下创制 package.json 、.babelrc、以致index-react.html、index-vue.html、index-ts.html 四个作为独家技艺栈 demo 的输入文件。

在 package.json 中增添以下命令

"scripts": {
  "react": "parcel index-react.html",
  "vue": "parcel index-vue.html",
  "ts": "parcel index-ts.html"
}

React

安装 React 的有关依赖 npm i -S parcel-bundler react react-dom babel-preset-env babel-preset-react

在 .babelrc 中添加

{
  "presets": ["env","react"]
}

那正是地点讲到的 Parcel 的表征:自动转变。该文件是让 Parcel 自动转变 ES6 和 React JSX。

<!-- index-react.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Parcel React</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="react-app"></div>
        <script src="src/react/index.js"></script>
    </body>
</html>

// src/react/index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Hello extends Component {
    render() {
        return <h1>Hello React</h1>;
    }
}

ReactDOM.render(<Hello />, document.getElementById('react-app'));

运营命令 npm run react 打开 就能够见到 Hello React

Vue

就在近来,Parcel 终于匡助 .vue 文件了,只需求引进一个包 parcel-plugin-vue,不需要任何配置,就可以打包 Vue 了。

安装 Vue 相关信赖,npm i -S vue parcel-plugin-vue

<!-- index-vue.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Parcel Vue</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="vue-app"></div>
        <script src="src/vue/index.js"></script>
    </body>
</html>

// src/vue/index.js
import Vue from 'vue';
import App from './app.vue';

new Vue({
    el: '#vue-app',
    render: h => h(App)
})

<!-- src/vue/app.vue -->
<template>
    <div>
        <h1>Hello Vue</h1>
    </div>
</template>

运维命令 npm run vue 打开 就能够见到 Hello Vue

TypeScript

集成 TypeScript 也特轻便,只供给安装 typescript 模块就可以,也没有供给布署。

安装 TypeScript 相关信赖,npm i -S typescript

<!-- index-ts.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Parcel TypeScript</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1 id="ts-app"></h1>
        <script src="src/typescript/index.ts"></script>
    </body>
</html>

interface Name {
    value: string;
}
function showName(name: Name){
    document.getElementById('ts-app').innerHTML = 'Hello ' + name.value;
}

showName({value: 'TypeScript'});

运营命令 npm run ts 打开 就能够见到 Hello TypeScript

Sass

将 Sass 在上头技巧栈中使用也特别简单,只必要安装 node-sass 模块就能够,也不要求配备。

设置 Sass 相关信任,npm 或然会下载不成功,这里运用 cnpm 来安装,cnpm i -S node-sass

在 src/vue/app.vue 中来采纳 Sass

<!-- src/vue/app.vue -->
<template>
    <div class="main">
        <h1>Hello Vue</h1>
    </div>
</template>

<style lang="scss">
    @import '../sass/main.scss';
</style>

.main{
    h1{
        color: #0099ff;
    }
}

再度运营命令 npm run vue 就能够看见带有血牙红字体的 Hello Vue

上述的 demo 源码地址:parcel-demo

生产条件

  • 安装情形变量parcel build index.html NODE_ENV=production
  • 安装输出目录parcel build index.html -d build/output
  • 安装要提供劳动的集体 U安德拉Lparcel build index.html --public-url ./
  • 禁止使用压缩parcel build index.html --no-minify
  • 剥夺文件系统缓存parcel build index.html --no-cache

疑问

  • 输出目录里是不是足以再分子目录,比如 css / js / img 等?
  • 页面援引的 html 被打包后也会重命名成十分长的一串,是还是不是能够不重命名?

澳门官网,前端情报局

是因为前段时间 Parcel 打着零配置的口号俘获了重重前端开采者的心,而且伴随着作弄webpack 使用布署复杂的音响。webpack 宗旨开拓者特意解释道,webpack v4.0.0-阿尔法.1 中投入了 mode 这些布局,那使得好些个头昏眼花繁琐的布局(诸如: sourcemaps、 tree shaking,、minification、scope hoisting)webpack 都替大家做好了,对于使用者来讲,基本上也是零配备了。

更加多小说:lin-xin/blog

本文由金沙手机版下载发布于澳门官网,转载请注明出处:常见技术栈的集成方式

关键词:

  • 上一篇:没有了
  • 下一篇:没有了