前端构建工具、browserify、gulp的组合使用及尝试感言

最新推荐文章于 2024-07-16 22:39:22 发布
最新推荐文章于 2024-07-16 22:39:22 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： 前端 文章标签： 前端构建 browserify gulp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdnight/article/details/52817671
版权

前言

前端的技术发展真的快，好了，废话不多说，先说说使用browserify及gulp配合构建的例子以及个人认为的缺陷。
后面会将这个项目的构建工具以及demo源代码发出来的。。。但是但是但是，browserify+gulp还是没能解决开发和在客户端部分加载的问题，也没办法打包成为多个文件，然后像seajs那样模块加载—-这个可是很致命的。browserify的出现至少展示了前端工程化的新方向—-预编译，但是还差一点，而我就是要解决相差的那一点甚至为了解决这个问题而要推倒重来—甚至不用browserify。
不过说起来，这个demo和构建工具虽然是半成品，但也可以给大家一些启示，起码我自己在做这个预编译样式和代码的时候逐渐明白了方向。

简介

构建的系统大约分成几部分–针对每一个项目的配置文件，build.js，构建工具以及构建的产物和资源列表。
大约如下：
这里写图片描述

还有，一个用来演示的构建网站，php+composer的，而mvc的只是个人根据网上的改改而成。
这里写图片描述

我们还是先来看看演示网站的实际成品吧，看看构建出来的结果产物：
这里写图片描述

静态资源的构建规则

1、对于成熟的外部类库，譬如，jquery，mement这些，可以指定为静态资源，然后，构建工具会自动计算出这些资源的md5码，然后就会在页面上面构建引用url。
来看看jquery的引用过程：
这里写图片描述
a、在配置文件build。js这样设定：
这里写图片描述
b、工具构建后得到的对应的资源表：
这里写图片描述

c、好了，在页面如何引用：
这里写图片描述
页面的引用是根据配置文件规定的资源id；来的，事实上，前端构建以后，所有资源都应该用文件列出来，而资源路径都应该要自动构建，所有资源都带有md5甚至样式和脚本和图片名字都包含md5的一个重要考量是，构建出来的文件可以作为本地缓存，以后改改路径就可以了，彻底利用缓存。
而脚本路径引用逻辑是这样的：

<?php
/**
 * Created by PhpStorm.
 * User: hasee
 * Date: 2016/10/5
 * Time: 13:49
 */
class UrlHelper{

    private static $res_json;
    private static $res_setting_json;
    public function __construct()
    {

        if(!isset(self::$res_json)){
            $_content=file_get_contents(BASE_PATH."/data/resource.json");
            self::$res_json = json_decode($_content, true);

            $_content=file_get_contents(BASE_PATH."/data/res.setting.json");
            self::$res_setting_json = json_decode($_content, true);
        }
    }

    public function CssUrl($resID){
        $res_mode="dev";
        if (self::$res_setting_json["mode"]=="dev"){
            $res_mode="dev";
        }
        else{
            $res_mode="dist";
        }

        if(self::$res_json["styles"]&&self::$res_json["styles"][$resID]){
            $res_rule=self::$res_json["styles"][$resID];
            return  CONTEXTPATH.$res_rule[$res_mode];
        }
        else{
            return '<!--css resource named '.$resID.' is not found or mode '.$res_mode.' is not found-->';
        }

    }
    public function JsUrl($resID){
        $res_mode="dev";
        if (self::$res_setting_json["mode"]=="dev"){
            $res_mode="dev";
        }
        else{
            $res_mode="dist";
        }
        if(self::$res_json["scripts"]&&self::$res_json["scripts"][$resID]){
            $res_rule=self::$res_json["scripts"][$resID];
            return  CONTEXTPATH.$res_rule[$res_mode];
        }
        else{
            return '<!--js resource named '.$resID.' is not found or mode '.$res_mode.' is not found-->';
        }

    }
    public function StaticCssUrl($resID){
        $res_mode="dev";
        if (self::$res_setting_json["mode"]=="dev"){
            $res_mode="dev";
        }
        else{
            $res_mode="dist";
        }
        if(self::$res_json["static"]["styles"]&&self::$res_json["static"]["styles"][$resID]){
            $res_rule=self::$res_json["static"]["styles"][$resID];
            return  CONTEXTPATH.$res_rule[$res_mode]."?v=".$res_rule["md5"];
        }
        else{
            return '<!--css resource named '.$resID.' is not found or mode '.$res_mode.' is not found-->';
        }

    }
    public function StaticJsUrl($resID){
        $res_mode="dev";
        if (self::$res_setting_json["mode"]=="dev"){
            $res_mode="dev";
        }
        else{
            $res_mode="dist";
        }
        if(self::$res_json["static"]["scripts"]&&self::$res_json["static"]["scripts"][$resID]){
            $res_rule=self::$res_json["static"]["scripts"][$resID];
            return  CONTEXTPATH.$res_rule[$res_mode]."?v=".$res_rule["md5"];
        }
        else{
            return '<!--js resource named '.$resID.' is not found or mode '.$res_mode.' is not found-->';
        }

    }

    public function CssForModule($module,$resID){
        $res_mode="dev";
        if (self::$res_setting_json["mode"]=="dev"){
            $res_mode="dev";
        }
        else{
            $res_mode="dist";
        }
        if(self::$res_json["modules"][$module]&&self::$res_json["modules"][$module]["styles"]&&self::$res_json["modules"][$module]["styles"][$resID]){
            $res_rule=self::$res_json["modules"][$module]["styles"][$resID];
            return  CONTEXTPATH.$res_rule[$res_mode];
        }
        else{
            return '<!--css resource named '.$resID.' is not found or mode '.$res_mode.' is not found-->';
        }

    }
    public function JsForModule($module,$resID){
        $res_mode="dev";
        if (self::$res_setting_json["mode"]=="dev"){
            $res_mode="dev";
        }
        else{
            $res_mode="dist";
        }
        if(self::$res_json["modules"][$module]&&self::$res_json["modules"][$module]["scripts"]&&self::$res_json["modules"][$module]["scripts"][$resID]){
            $res_rule=self::$res_json["modules"][$module]["scripts"][$resID];
            return  CONTEXTPATH.$res_rule[$res_mode];
        }
        else{
            return '<!--js resource named '.$resID.' is not found or mode '.$res_mode.' is not found-->';
        }

    }
    public function ActionUrlFor($model,$actionName){
        $_php_name="/admin.php";
        if($model=="admin"){}
        else{
            $_php_name="/index.php";
        }
        return CONTEXTPATH.$_php_name."/".$actionName;
    }
}

看不懂不要紧，因为这里只是着重说一下相关流程，等下会有demo放出去慢慢尝试的。

d、页面上面的渲染结果：
这里写图片描述

样式和图片的构建规则

样式和图片的构建，样式支持scss，支持import，同时可以设定多个样式合并在一起，还有就是，构建样式的时候会将图片自动放到产出目录，给图片加上md5特征码，顺便将样式里面对应图片的路径改成产出图片路径。
现在我们来看看一个例子：
a、我们现在有两个样式，叫global.scss,reset.scss需要合并在一起，还有一个样式叫login.scss的，需要构建一下，用于登录页面。
这里写图片描述
这里写图片描述
这里写图片描述
登录的样式：
这里写图片描述

我们需要这样设定：
这里写图片描述

构建以后变成了：
这里写图片描述
这里写图片描述
这里写图片描述

资源文件对应部分如下：
好吧。。我将全部内容都贴出来算了，等下再解释：

{
  "styles": {
    "all": {
      "dev": "/static/dist/css/all.2b7f3e80f486e8e74e1b7c06fa0f283f.css",
      "dist": "/static/dist/css/all.2b7f3e80f486e8e74e1b7c06fa0f283f.min.css",
      "md5": "2b7f3e80f486e8e74e1b7c06fa0f283f"
    }
  },
  "scripts": {
    "index": {
      "dev": "/static/dist/js/index.4bec43ad342ba77e520e070fdab275b5.js",
      "dist": "/static/dist/js/index.4bec43ad342ba77e520e070fdab275b5.min.js",
      "md5": "4bec43ad342ba77e520e070fdab275b5"
    },
    "base": {
      "dev": "/static/dist/js/base.f4adca34785cd216d7a53aba2f69b437.js",
      "dist": "/static/dist/js/base.f4adca34785cd216d7a53aba2f69b437.min.js",
      "md5": "f4adca34785cd216d7a53aba2f69b437"
    }
  },
  "static": {
    "styles": {},
    "scripts": {
      "jquery": {
        "dev": "/static/lib/jquery-1.8.0.js",
        "dist": "/static/lib/jquery-1.8.0.min.js",
        "md5": "04903dc2c64729e82e640d527223c9af"
      },
      "seajs": {
        "dev": "/static/lib/sea-debug.js",
        "dist": "/static/lib/sea.js",
        "md5": "1c05fca93443a604bb4455873366ad21"
      },
      "ResourceHelper": {
        "dev": "/static/helpers/ResourceHelper.js",
        "dist": "/static/helpers/ResourceHelper.js",
        "md5": "36ee7f820fdc2b043bedc6dbb2ce3f53"
      },
      "moment": {
        "dev": "/static/lib/moment.js",
        "dist": "/static/lib/moment.min.js",
        "md5": "0dd576e025858b47248c33dff8190711"
      },
      "react": {
        "dev": "/static/lib/react.js",
        "dist": "/static/lib/react.min.js",
        "md5": "b941048c2c0025f56c5ecb0e4ecdc2c5"
      },
      "react-dom": {
        "dev": "/static/lib/react-dom.js",
        "dist": "/static/lib/react-dom.min.js",
        "md5": "ee7a0372099ba328275eedc45c8d34b6"
      },
      "ejs": {
        "dev": "/static/lib/ejs_production.js",
        "dist": "/static/lib/ejs_production.js",
        "md5": "bf9e301590ff13ac104b924e54632f7c"
      },
      "laytpl": {
        "dev": "/static/lib/laytpl.js",
        "dist": "/static/lib/laytpl.js",
        "md5": "ae95df82da180a6cca9911eba78eb635"
      }
    }
  },
  "modules": {
    "admin": {
      "styles": {
        "login": {
          "dev": "/static/dist/css/login.a1554d99bc9bae2ec8e7b03bc6127388.css",
          "dist": "/static/dist/css/login.a1554d99bc9bae2ec8e7b03bc6127388.min.css",
          "md5": "a1554d99bc9bae2ec8e7b03bc6127388" }
      },
      "scripts": {
        "login": {
          "dev": "/static/dist/js/login.cdbc1ea9b42d494cf1a9ebd5fad975b1.js",
          "dist": "/static/dist/js/login.cdbc1ea9b42d494cf1a9ebd5fad975b1.min.js",
          "md5": "cdbc1ea9b42d494cf1a9ebd5fad975b1" }
      }
    }
  }
}

可以看到所有拥有资源id的资源都包括在内。
然后引用的页面内容如下：

    <link href="<?php echo CssUrl('all')?>" rel="stylesheet" type="text/css" />
    <link href="<?php echo CssForModule("admin","login")?>" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="<?php echo StaticJsUrl('jquery'); ?>"></script>
    <script type="text/javascript" src="<?php echo StaticJsUrl('moment'); ?>"></script>
    <script type="text/javascript" src="<?php echo StaticJsUrl('react'); ?>"></script>
    <script type="text/javascript" src="<?php echo StaticJsUrl('react-dom'); ?>"></script>
    <script type="text/javascript" src="<?php echo StaticJsUrl('ResourceHelper'); ?>"></script>
    <script type="text/javascript" src="<?php echo StaticJsUrl('laytpl'); ?>"></script>
    <script type="text/javascript" src="<?php echo StaticJsUrl('seajs'); ?>"></script>

实际渲染效果如下：


    <link href="/eFace/static/dist/css/all.2b7f3e80f486e8e74e1b7c06fa0f283f.css" rel="stylesheet" type="text/css" />
    <link href="/eFace/static/dist/css/login.a1554d99bc9bae2ec8e7b03bc6127388.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/eFace/static/lib/jquery-1.8.0.js?v=04903dc2c64729e82e640d527223c9af"></script>
    <script type="text/javascript" src="/eFace/static/lib/moment.js?v=0dd576e025858b47248c33dff8190711"></script>
    <script type="text/javascript" src="/eFace/static/lib/react.js?v=b941048c2c0025f56c5ecb0e4ecdc2c5"></script>
    <script type="text/javascript" src="/eFace/static/lib/react-dom.js?v=ee7a0372099ba328275eedc45c8d34b6"></script>
    <script type="text/javascript" src="/eFace/static/helpers/ResourceHelper.js?v=36ee7f820fdc2b043bedc6dbb2ce3f53"></script>
    <script type="text/javascript" src="/eFace/static/lib/laytpl.js?v=ae95df82da180a6cca9911eba78eb635"></script>
    <script type="text/javascript" src="/eFace/static/lib/sea-debug.js?v=1c05fca93443a604bb4455873366ad21"></script>

脚本的构建规则

好了，看了前面两个，实际上脚本的构建也差不多。
这里写图片描述
这里写图片描述
这里写图片描述

但缺点在于，browserify生成的脚本实际上只是放到同一个文件夹里面，然后自己定义了一个require，将模块都放在内部的数据里面，没有办法动态加载任何一个这样的脚本然后再加载里面的任意一个模块。
请看看源代码：

(function outer (modules, cache, entry) {
// Save the require from previous bundle to this closure if any
    var previousRequire = typeof require == "function" && require;

    function newRequire(name, jumped){
        if(!cache[name]) {
            if(!modules[name]) { // if we cannot find the module within our internal map or // cache jump to the current global require ie. the last bundle // that was added to the page. var currentRequire = typeof require == "function" && require; if (!jumped && currentRequire) { return currentRequire(name, true); } // If there are other bundles on this page the require from the // previous one is saved to 'previousRequire'. Repeat this as // many times as there are bundles until the module is found or // we exhaust the require chain. if (previousRequire) { return previousRequire(name, true); } var err = new Error('Cannot find module \'' + name + '\''); err.code = 'MODULE_NOT_FOUND'; throw err; }
            var m = cache[name] = {exports:{}};
            modules[name][0].call( m.exports, function(x) { var id = modules[name][1][x]; return newRequire(id ? id : x); }, m, m.exports, outer, modules, cache, entry);
        }
        return cache[name].exports;
    }
    for(var i=0;i<entry.length;i++)
    {
        newRequire(entry[i]);
    }

// Override the current require with this new one
    return newRequire;
})({1:[function(require,module,exports){ /** * Created by hasee on 2016/10/5. */ var WebUI = { showConfirm: function (opts) { console.log("confirm pls."); } }; module.exports = WebUI; },{}],2:[function(require,module,exports){ var Child = React.createClass({ displayName: "Child", render: function () { return React.createElement("div", null, " The Child "); } }); module.exports = Child; },{}],3:[function(require,module,exports){ /** * Created by hasee on 2016/10/5. */ //--前端日志记录，以便性能优化。 var Logger = { log: function (message) { console.log("run Logger.log"); } }; module.exports = Logger; },{}],4:[function(require,module,exports){ var Child = require('./Child.jsx'); var Parent = React.createClass({ displayName: "Parent", render: function () { return React.createElement("div", null, React.createElement("div", null, " Hello World "), React.createElement(Child, null)); } }); module.exports = Parent; },{"./Child.jsx":2}],5:[function(require,module,exports){ /** * Created by hasee on 2016/10/5. */ var Logger = require('./assets/logger'); var WebUI = require('./assets/WebUI.js'); var Parent = require('./assets/Parent.jsx'); var NumberSelector = ""; var app = { init: function () { Logger.log("hello"); setTimeout(function () { WebUI.showConfirm({}); }, 1000); ReactDOM.render(React.createElement(Parent, null), document.getElementById('app')); //--模板渲染。 this.renderList(); var t2 = NumberSelector; }, renderList: function () { var tplStr = ResourceHelper.getTemplateFromBaseDir("<h3>{{ d.title }}</h3> <p class=\"intro\">{{ d.intro }}</p> <ul> {{# for(var i = 0, len = d.list.length; i < len; i++){ }} <li> <span>{{ d.list[i].name }}</span> <span>所在城市：{{ d.list[i].city }}</span> </li> {{# } }} </ul>"); //第三步：渲染模版 var data = { title: '前端攻城师', list: [{ name: '贤心', city: '杭州' }, { name: '谢亮', city: '北京' }, { name: '浅浅', city: '杭州' }, { name: 'Dem', city: '北京' }] }; $("#log").append(laytpl(tplStr).render(data)); } }; $(function () { app.init(); }); },{"./assets/Parent.jsx":4,"./assets/WebUI.js":1,"./assets/logger":3}]},{},[5]);

话说

./assets/Parent.jsx

这种形式的require真的丑到爆，当然，browserify可以用将npm install了的模块也打包进去文件里面。。
但是我觉得这个真的是扯谈。。。服务端的代码跟客户端浏览器本来就不一样的，硬要两者合并到时候死都不知道怎么死。
还有一点就是，不支持模块分割。。。有些模块是基本不变的，譬如，我们自己写的ui插件，有些是经常变化的，譬如，业务逻辑。我们需要一个机制可以有模块分割，浏览器加载。seajs当时也做得挺好的。
难道就没有一种像java那样，在文件里面写个package xxx，然后在其他文件上面导入命名空间，譬如，import(‘xxxx’)这样就可以用的机制吗？当然有，下一篇文章就是完成这个的。但是不知道什么时候会写。

资源下载及相关

需要注意的是，构建工具需要npm install一下，然后设定文件里面：
这里写图片描述
configFile需要换成你自己的项目目录。
下载地址：
这里写链接内容
b、php项目用的是composer，请自行搭建环境然后安装类库。
这里写图片描述

用来这么多类库的，还要搭建apache服务器，你懂得。
下载地址：
这里写链接内容

码农下的天桥
关注
专栏目录
gulp-browserify, 带BrowserifyJS的捆绑模块.zip
10-10
gulp-browserify, 带BrowserifyJS的捆绑模块 注意：这个插件不再维护，checkout gulp为类似插件，或者食谱 gulp-team使用 browserify reference 。 软件包吞咽 browserify描述带BrowserifyJS的捆绑
使用npm+gulp+browserify网页前端开发
weixin_34273046的博客
12-27 169
为什么80%的码农都做不了架构师？>>> ...
前端构建工具：Webpack、Gulp、Browserify、Grunt的对比与选择
你若盛开，清风自来
07-16 935
本文将详细介绍Webpack、Gulp、Browserify、Grunt这四种前端构建工具的特点、优势和应用场景，帮助读者根据实际需求选择最适合的工具。Webpack、Gulp、Browserify、Grunt各有特点和优势，选择合适的工具需要根据项目需求、团队熟悉度和性能要求等因素综合考虑。掌握这些工具的使用方法，可以为项目开发提供强有力的支持。
前端工程之构建工具-gulp实战
shut1k的博客
11-15 1819
前端工程之构建工具-gulp实战原文写于 2014-10-24 https://github.com/kuitos/kuitos.github.io/issues/11对前端构建自动化有所了解的同学应该都听过大名鼎鼎的grunt，但是grunt作为前端自动化构建工具的领头羊现在越来越受到诟病。大而全已经不适应这个时代了，这个时代需要的是小而美的工具及插件。什么都想干往往意味着什么都干不好，YUI的死
TypeScript学习笔记（二）之Browserify Gulp
翎羽飘的小分享
08-28 1871
1、使用Browserify将工程移入浏览器环境 1）安装Browserify，tsify（Browserify的插件，能够访问TypeScript编译器），vinyl-source-stream（将Browserify的输出文件适配成gulp能够解析的格式） npm install --save-dev browserify tsify vinyl-source-stream 2）在src
gulp+bower体系如何使用browserify调用npm模块
m1213642578的专栏
08-24 1283
gulp+bower体系下，如何用正确得姿势调用到npm中的模块
前端构建工具之gulp的配置与搭建详解
10-19
本文将深入探讨一种流行的前端构建工具——Gulp.js。与Grunt.js相比，Gulp.js以其简洁的API和高效的工作流程，赢得了开发者们的青睐。 **一、为什么选择Gulp.js？** 在复杂的前端项目中，自动化的构建流程是必不可...
前端构建工具之gulp的语法教程
08-30
**前端构建工具之gulp语法教程** 在前端开发中，构建工具是必不可少的，它们能够自动化地执行各种任务，如编译、压缩、合并代码等，极大地提高了开发效率。gulp作为一款流行的JavaScript构建工具，以其简单易用的...
前端构建工具：Gulp.zip
最新发布
08-18
史上最全web前端技术全套教程，包括： 前端API集成 前端基础知识 前端开发最佳实践 前端性能优化 前端构建工具 前端框架和库 前端测试工具 前端状态管理 等流行技术的系列教程
browserify-gulp:browserify 的基本用法并使用 gulp 运行它
07-04
浏览器吞咽 browserify 的基本用法并使用 gulp 运行它
gulp开发简单配置以及配合browserify应用
好好学习
01-28 1075
前端开发都需要对css ，js 打包压缩，less 编译，gulp简单的风格，可以完美的完成这项任务。 首先需要安装gulp npm install gulp -g npm install gulp--save-dev 安装gulp 需要的插件 如下 npm install gulp-*** --save-dev var uglify = require('gulp-ug...
browserify
xuxiaojie2016的博客
07-12 806
Browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码，通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。弥补了gulp所遗留的问题。 具体请看 浏览器本身并不提供模块管理的机制，为了调用各个模块，有时不得不在网页中，加入一大堆script标签。这样就使得网页体积臃肿，难以维护，还产生大量
前端模块化开发学习之gulp&browserify篇
weixin_30354675的博客
12-23 140
　　随着web应用的发展，前端的比重占得越来越多，编写代码从而也越来越复杂。而通常我们需要将不同功能或者不同模块的代码分开写，最后在html中一起加载，这样做是可以的，但是当你需要进行维护或者是二次开发的时候，你会觉得十分费劲，因为你不知道文件之间复杂的关系，所以我们需要利用一些插件来配合进行模块化的开发。 　　所谓模块化的开发，写过nodejs的人都知道，文件之间的依赖可以用require(...
在同时使用 gulp 和 browserify 过程中 pipe 的问题以及思路
weixin_33695450的博客
11-04 318
为什么80%的码农都做不了架构师？>>> ...
使用Gulp(V3.+) + Babel + Browserify 配置ES6的开发环境
雾里看花叹朦胧
01-14 750
这里使用的Gulp 版本有 V3.9.1，大版本为3.0，如果使用了V4.0版本，配置上会有比较大的改变，具体可以参考另外一篇文章： 1.简单说明一下： gulp 是工具， Babel 编译 ES6 => ES5, Browserify 添加浏览器支持。 2. 整体项目结构 3. 测试代码 3.1 App.js class App{ constructor(name) { ...
browserify babel gulp 没有编译import的文件
weixin_30299539的博客
04-12 189
1.遇到坑的gulp配置: var gulp = require('gulp'), watch = require('gulp-watch'), babel = require('gulp-babel'); var envify = require('gulp-envify'); var browserify = require('gulp-browserify'); var ...
vue项目cannot get/的解决办法
热门推荐
xiawenyi1234的博客
08-07 1万+
启动项目报 cannot get/错误， 一般是项目文件引用路径的问题，或者无意删除了已经被import引入的文件 总之 一般是文件路径的问题。 事实上 当你npm run dev之后，除了看浏览器控制台报什么错，还可以从WebStorm编辑器集成的node控制台查看报错信息。这个控制台一般会报类似这样的错误信息：This relative module was not found:后面会加找不到...
gulp教程3：几个常见问题及解决方案
json博客
01-28 2785
1. 找不到local gulp 报错代码： $ gulp [23:29:31] Local gulp not found in [23:29:31] Try running: npm install gulp 解决：npm link gulp 或者重新全局和项目安装gulp 2. cannot find module 'gulp’ 报错代码： cannot find module 'gu...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值