前言
SpreadJS作為一款性能出眾的純前端電子表格控件，自2015年發布以來，已經被廣泛應用於各領域“在線Excel”數據管理項目中。NPM，作為管理Node.js庫最有力的手段，解決了很多NodeJS代碼部署的問題。
如今，為讓您更方便的使用產品和更好地管理項目中的SpreadJS代碼，我們已將SpreadJS應用打包發布到了NPM服務器。如您需要，請點擊查看（需要翻牆）
NPM簡介
也許您剛剛接觸前端開發，或者剛剛使用NodeJS。NPM對於您來說，可能會感到些許陌生。這里，是NPM的簡單介紹，希望能夠幫您：NPM是隨同NodeJS一起發布的包管理工具，也是目前用於管理node.js庫最有效的手段。它能解決NodeJS代碼部署上的很多問題，常見的使用場景有以下幾種：
1. 允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
2. 允許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
3. 允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用。
本文中，我們將向您介紹如何在webpack項目中使用SpreadJS 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文件：
總結
本教程展示了在webpack項目中使用SpreadJS NPM包是多么容易。這只是一個開始，你可以在此基礎上創建更高級的項目。
關於SpreadJS – 可嵌入您系統的在線Excel
SpreadJS 純前端表格控件是基於 HTML5 的 JavaScript 電子表格和網格功能控件，適用於 .NET、Java 、Web 應用程序、移動端等多種平台的表格數據處理和類 Excel 功能的表格程序開發。全中文操作界面，零學習成本！便於您在系統開發過程中，更安全的管理 Excel 數據，更快捷的完成海量數據交互，更方便的進行數據導出、導入、排序、過濾、增刪改查、可視化及 Excel 導入/導出等操作。