V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
powertoolsteam
V2EX  ›  推广

SpreadJS 使用进阶指南 - 使用 NPM 管理你的项目

  •  
  •   powertoolsteam · 2019-03-06 10:30:08 +08:00 · 1076 次点击
    这是一个创建于 2091 天前的主题,其中的信息可能已经有所发展或是发生改变。

    SpreadJS ( http://www.grapecity.com.cn/developer/spreadjs )作为一款性能出众的纯前端电子表格控件,自 2015 年发布以来,已经被广泛应用于各领域“在线 Excel ”数据管理项目中。NPM,作为管理 Node.js 库最有力的手段,解决了很多 NodeJS 代码部署的问题。

    如今,为让您更方便的使用产品和更好地管理项目中的 SpreadJS 代码,我们已将 SpreadJS 应用打包发布到了 NPM 服务器。如您需要,请点击查看: https://www.npmjs.com/~grapecity (需要 FQ )

    NPM 简介

    也许您刚刚接触前端开发,或者刚刚使用 NodeJS。NPM 对于您来说,可能会感到些许陌生。这里,是 NPM 的简单介绍,希望能够帮您:NPM 是随同 NodeJS 一起发布的包管理工具,也是目前用于管理 node.js 库最有效的手段。它能解决 NodeJS 代码部署上的很多问题,常见的使用场景有以下几种:

    1. 允许用户从 NPM 服务器下载别人编写的第三方包到本地使用。
    2. 允许用户从 NPM 服务器下载并安装别人编写的命令行程序到本地使用。
    3. 允许用户将自己编写的包或命令行程序上传到 NPM 服务器供别人使用。

    本文中,我们将向您介绍如何在 webpack 项目中使用 SpreadJS NPM 包。

    安装 Node.js 和 NPM

    在使用该项目之前,请确保下载并安装 Node.js( https://nodejs.org/en/ )和 NPM( https://www.npmjs.com/get-npm )。

    安装项目文件和文件夹

    现在已经安装了 Node.js 和 NPM,我们将创建在 webpack 项目中使用的文件夹和文件。第一个创建的文件夹将被称为 spreadjs_webpack。

    创建文件夹后,打开命令提示符,导航到创建的文件夹,然后输入以下命令:

    npm init -y
    

    这将创建一个包含以下内容的 package.json 文件:

    { 
    
    "name": "spreadjs_webpack",
    
    "version": "1.0.0",
    
    "description": "",
    
    "main": "index.js",
    
    "scripts": {
    
    "test": "echo \\"Error: no test specified\\" && exit 1"
    
    },
    
    "keywords": [],
    
    "author": "",
    
    "license": "ISC"
    
    }
    

    在创建该文件之后,输入以下命令,并在每个命令后面输入:

    npm install webpack --save
    npm install webpack-cli --save
    

    这会将一个 node_modules 文件夹添加到项目中,这是我们获取 Spread 引用的地址。

    首先,我们将创建一个 webpack.config.js 文件。创建该文件,然后将以下内容添加到文件中:

    const path = require('path');
    
    module.exports = {
    
    entry: './src/index.js',
    
    output: {
    
    filename: 'bundle.js',
    
    path: path.resolve(__dirname, 'dist')
    
    },
    
    mode: "development",
    
    optimization: {
    
    minimize: false
    
    }
    
    }
    

    另外,package.json 文件需要稍微改变:

    {
    
    "name": "spreadjs_webpack",
    
    "version": "1.0.0",
    
    "description": "",
    
    "main": "index.js",
    
    "scripts": {
    
    "build": "webpack --config webpack.config.js"
    
    },
    
    "keywords": [],
    
    "author": "",
    
    "license": "ISC",
    
    "dependencies": {
    
    "webpack": "\^4.6.0",
    
    "webpack-cli": "\^2.1.2"
    
    }
    
    }
    

    在同一个 spreadjs_webpack 文件夹中,我们将创建一个 dist 文件夹并在该文件夹中创建一个名为 index.html 的 html 文件。这个 html 应该从以下内容开始:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>SpreadJS Development</title>
        <script src="bundle.js"></script>
    </head>
    
    <body>
        <div id="ss" style="width:80%;height:80vh;border:1px solid lightgray"></div>
    </body>
    
    </html>
    

    我们需要手动创建的最后一个文件夹和文件是 spreadjs_webpack 文件夹中的 src 文件夹,以及该文件夹中的 index.js 文件。我们稍后将添加内容。目录的结构应该如下所示:

    spreadjs_webpack
        |- package.json
        |- webpack.config.js
        |- /dist
           |- index.html
        |- /src
           |-index.js
    

    安装 Spread.Sheets 并添加引用

    回到命令提示符,输入以下命令来安装 Spread.Sheets:

    npm install @grapecity/spread-sheets
    

    一旦安装完毕,回到 package.json 文件并在依赖项部分为 Spread.Sheets 添加一个依赖项:

    {
    
    "name": "spreadjs_webpack",
    
    "version": "1.0.0",
    
    "description": "",
    
    "main": "index.js",
    
    "scripts": {
    
    "build": "webpack --config webpack.config.js"
    
    },
    
    "keywords": [],
    
    "author": "",
    
     "license": "ISC",
    
    "dependencies": {
    
    "@grapecity/spread-sheets": "\^11.1.0",
    
    "webpack": "\^4.6.0",
    
    "webpack-cli": "\^2.1.2"
    
    }
    
    }
    

    要完成 HTML 文件,请将 Spread.Sheets css 文件从 node_modules / @ grapecity / spread-sheets / styles 文件夹复制到 dist 文件夹。更新 index.html 文件以引用此 css 文件:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>SpreadJS Development</title>
        <link href="gc.spread.sheets.excel2013white.css" rel="stylesheet" />
        <script src="bundle.js"></script>
    </head>
    
    <body>
        <div id="ss" style="width:80%;height:80vh;border:1px solid lightgray"></div>
    </body>
    
    </html>
    

    现在我们可以在 index.js 文件中添加代码来实际初始化 Spread.Sheets 组件:

    var gc = require('@grapecity/spread-sheets');
    
    window.onload = function () {
    
    var workbook = new gc.Spread.Sheets.Workbook(document.getElementById("ss"));
    
    var worksheet = workbook.getActiveSheet();
    
    worksheet.getCell(3,3).value("SpreadJS Npm Package in Webpack Project");
    
    }
    

    要测试项目,请返回到命令提示符并输入以下命令:

    npm run build
    

    要正确运行页面,请在 Web 浏览器中打开 index.html 文件:

    index.html 文件
    

    总结

    本教程展示了在 webpack 项目中使用 SpreadJS NPM 包是多么容易。这只是一个开始,你可以在此基础上创建更高级的项目。( https://www.grapecity.com.cn/developer/spreadjs )

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1183 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 18:26 · PVG 02:26 · LAX 10:26 · JFK 13:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.