SpreadJS使用進階指南 - 使用 NPM 管理你的專案

葡萄城技術團隊發表於2018-06-21
JSNPM

前言

SpreadJS作為一款效能出眾的純前端電子表格控制元件，自2015年釋出以來，已經被廣泛應用於各領域“線上Excel”資料管理專案中。NPM，作為管理Node.js庫最有力的手段，解決了很多NodeJS程式碼部署的問題。

如今，為讓您更方便的使用產品和更好地管理專案中的SpreadJS程式碼，我們已將SpreadJS應用打包釋出到了NPM伺服器。如您需要，請點選檢視（需要FQ）

NPM簡介

也許您剛剛接觸前端開發，或者剛剛使用NodeJS。NPM對於您來說，可能會感到些許陌生。這裡，是NPM的簡單介紹，希望能夠幫您：NPM是隨同NodeJS一起釋出的包管理工具，也是目前用於管理node.js庫最有效的手段。它能解決NodeJS程式碼部署上的很多問題，常見的使用場景有以下幾種：

1.       允許使用者從NPM伺服器下載別人編寫的第三方包到本地使用。

2.       允許使用者從NPM伺服器下載並安裝別人編寫的命令列程式到本地使用。

3.       允許使用者將自己編寫的包或命令列程式上傳到NPM伺服器供別人使用。

本文中，我們將向您介紹如何在webpack專案中使用SpreadJS NPM包。

安裝Node.js和NPM

在使用該專案之前，請確保下載並安裝Node.js和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檔案：

https://img4.mukewang.com/5b2b49f2000108f707570745.jpg

總結

本教程展示了在webpack專案中使用SpreadJS NPM包是多麼容易。這只是一個開始，你可以在此基礎上建立更高階的專案。

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

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

 

相關文章