SpreadJS使用進階指南 - 使用 NPM 管理你的項目

時間 2019-11-09

標籤 spreadjs 使用進階指南 npm 管理項目简体版

原文原文鏈接

前言

SpreadJS做爲一款性能出衆的純前端電子表格控件，自2015年發佈以來，已經被普遍應用於各領域「在線Excel」數據管理項目中。NPM，做爲管理Node.js庫最有力的手段，解決了不少NodeJS代碼部署的問題。css

現在，爲讓您更方便的使用產品和更好地管理項目中的SpreadJS代碼，咱們已將SpreadJS應用打包發佈到了NPM服務器。如您須要，請點擊查看（須要FQ）html

NPM簡介

也許您剛剛接觸前端開發，或者剛剛使用NodeJS。NPM對於您來講，可能會感到些許陌生。這裏，是NPM的簡單介紹，但願可以幫您：NPM是隨同NodeJS一塊兒發佈的包管理工具，也是目前用於管理node.js庫最有效的手段。它能解決NodeJS代碼部署上的不少問題，常見的使用場景有如下幾種：前端

1. 容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。node

2. 容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。webpack

3. 容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。web

本文中，咱們將向您介紹如何在webpack項目中使用SpreadJS NPM包。npm

安裝Node.js和NPM

在使用該項目以前，請確保下載並安裝Node.js和NPM。json

安裝項目文件和文件夾

如今已經安裝了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文件：

總結

本教程展現了在webpack項目中使用SpreadJS NPM包是多麼容易。這只是一個開始，你能夠在此基礎上建立更高級的項目。

關於SpreadJS – 可嵌入您系統的在線Excel

SpreadJS 純前端表格控件是基於 HTML5 的 JavaScript 電子表格和網格功能控件，適用於 .NET、Java 、Web 應用程序、移動端等多種平臺的表格數據處理和類 Excel 功能的表格程序開發。全中文操做界面，零學習成本！便於您在系統開發過程當中，更安全的管理 Excel 數據，更快捷的完成海量數據交互，更方便的進行數據導出、導入、排序、過濾、增刪改查、可視化及 Excel 導入/導出等操做。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。