SPM v.1.1.2 with Seajs
SPM v1.1.2 usage Guide 1.SPM use
SEAJS provides a modular development mechanism, after the code development, but also need to do some product release related operations. These can be done through the SPM, which provides modules for installation, compression, and packaging deployment functions.
2.SPM Installation
1. Download the latest version of node from the Nodejs website. Here in node-0.8.14, for example, directly download the Windows version of the installation package, the default installation to "C:\Program Files\nodejs", will be automatically added to the path to see the version.
C:\Documents and Settings\Administrator>node -vv0.8.14
2. The new node comes with NPM, which installs the SPM via NPM. The following specifies the installation of version 1.1.2, which is currently the latest version. If you do not specify a version number, the latest version is installed by default. Installation package size is 11.8M, depending on the speed of the different, please wait patiently.
C:\Documents and Settings\Administrator>npm install [email protected] -gnpm http GET https://registry.npmjs.org/spm/1.1.2npm http 200 https://registry.npmjs.org/spm/1.1.2npm http GET https://registry.npmjs.org/spm/-/spm-1.1.2.tgznpm http 200 https://registry.npmjs.org/spm/-/spm-1.1.2.tgznpm http GET https://registry.npmjs.org/spm-envnpm http GET https://registry.npmjs.org/csslintnpm http GET https://registry.npmjs.org/async...
After downloading the SPM, the dependent packages are automatically installed according to the Package.json in the compressed package, and the following interface will be displayed.
C:\Documents and Settings\administrator\application DATA\NPM\SPM-C:\Documents and Settings\administrator\ Applicationdata\npm\node_modules\spm\bin\spm[email protected] C:\Documents and settings\administrator\ Application data\npm\node_modules\spm├──[email protected]├──[email protected]├──[email protected ]├──[email protected]├──[email protected]├──[email protected]├──[email protected]├──[email protected]├──[email protected] ([email protected]) ├──[email protected]├──[email Protected]├──[email protected]├──[email protected]├──[email protected] ([email protected]) ├──[email protected] ([email protected], [email protected], [email protected]) ├──[email Protected] ([email protected]) ├──[email protected]├──[email protected] ([email protected], [ Email protected]) ├──[email protected] ([email protected]) ├──[email protected] ([Email protected], [email protected]) ├──[email protected] ([email protected], [email protected], [email protected], [email protected], [email protected]) └──[email protected] ([ Email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]0, [email protected], [email protected], [email protected])
3. Check the version after installation
C:\Documents and Settings\Administrator>spm -vv1.1.2
If the installation is slow, git source code can be installed later, see the official documentation.
This test uses the Widnows XP operating system
The following demo uses the v1.1.2 version and may differ depending on the version, please pay attention to it yourself.
3.SPM Find and install modules
Let's start with the C packing directory to create a assets directory that holds all the files developed by the front end.
First use the SPM to download the development module, the SPM default module server is http://modules.spmjs.org/. You can also build a module server on your own inside the network, not detailed here.
We can first use the SPM Search command to find the version of the module that can be installed on the module server.
C:\assets>spm search seajsC:\assets>spm search jquery C:\assets>spm search mustache //以mustache为例子 ... versions: //这里列出可用的版本 0.4.0: - mustache.js 0.5.0: - mustache.js root: gallery //显示模块的跟目录 name: mustache tag: type:C:\assets>spm install [email protected] //指定安装seajs版本C:\assets>spm install gallery.jquery //不指定版本号,默认安装服务器上jquery最新版本C:\assets>spm install gallery.mustache //不指定版本号,默认安装服务器上mustache最新版本
Recently, the directory structure of the module server has been adjusted, the jquery path installation becomes the Gallery.jquery,mustache installation path is Gallery.mustache
After executing the above module installation command, in the assets directory there will be more Sea-modules directory, there are SEAJS and downloaded modules.
4.SPM Test Catalog and files
The entire development directory structure we set up here is:
c:\assets>tree/f Folder The PATH list volume sequence number is 4421-1f56c:. This represents the current directory C:\assets, storing all the files on the front-end ├─sea-modules//directories automatically generated after the SPM installation │├─seajs││└─1.2.1││plugin-less.js││ Plugin-base.js//Plug-in base class ││plugin-combo.js││plugin-debug.js││plugin-i18n.js//Globalization component , the following example is useful to ││plugin-json.js││plugin-coffee.js││plugin-reload.js││plugin-stor Age.js││plugin-text.js//File components, reading template files ││sea-debug.js││sea.js││package.json│ └─gallery│├─jquery//What does this say? ││└─1.8.3│││jquery-debug.js│││jquery.js│ ││package.json│││││└─gallery││jquery.tgz│││└─mustache Front End template class Library │└─0.5.0│MUSTACHE-DEBUG.JS│MUSTACHE.JS│PACKAGE.J Son│└─apps The overall directory of business Development, common module development may establish the SRC and test catalogs, │ here is just a demonstration of the use of SPM, so with a customDevelop catalog results. └─hello This directory holds the HTML page and the Package.json required by the SPM build. │index1.html This is an example of a JS module that is referenced as not deployed. │index_module.html Here is a sample that references a deployed JS module. │package.json the SPM build parameter file, similar to Ant's Build.xml. │└─js This directory holds the module files of the business development, here to hello-seajs the file of the original example, simply modified the next. │MAIN.JS│SPINNING.JS│├─TPL (here to store the template files needed for Business module development) │USERINFO.TPL │└─I18N (There is a globalized resource file) │lang.js default language resource file │└─ZH-CN Lang.js Chinese Language Resource document
Assuming that we have completed the above business development, now our task is to put all the files in the JS directory deployment into the Sea-module, and the JS file compression. Then modify the URL of the index.html path to refer to the deployed module.
Note i18n lang files and template files do not support the browser from being read locally and need to be deployed to a Web server such as Nginx or Tomcat.
//如果是nginx,可以参考下面的配置,nginx/conf/nginx.conf里面server区段 server { listen 80; //端口 server_name localhost; //主机地址 #charset koi8-r; #access_log logs/host.access.log main; location / { autoindex on; //打开目录和文件浏览功能 root c:/assets; //路径在这里 index index.html index.htm; //开始文件 autoindex_exact_size on; //显示文件大小 autoindex_localtime on; //显示文件时间 } }
5.SPM Packaged Deployment
When it comes to deployment, the Package.json file cannot be involved, and the following is the packaged configuration file for this example.
{ "name": "hello-seajs", "version": "1.0.0", "dependencies": { "jquery": "gallery/jquery/1.8.2/jquery", }, "root": "apps", "output": { "main.js": ".", "i18n": "i18n/**/*.js", "tpl": "tpl/**/*.tpl" }, "spmConfig": { "build": { "src": "js", "to": "../../sea-modules/{{root}}/{{name}}/{{version}}" } }}
Where Spmconfig is used to make command-related parameters, such as the SRC and to two parameters of the SPM build are developed.
SRC represents the path where the JavaScript code resides.
To indicates where to copy after packaging.
The root,name,version defined above are referenced at the time of packaging and are used to build the full path of the package.
Output defines the results and form of the outputs. The specific output parameters are explained in Https://github.com/spmjs/spm/wiki/package.json-:-output.
This means that the JS directory files are merged into one MAIN,JS and compressed. Other i18n files and TPL files need to be copied in the past.
dependencies indicates the modules on which the business code depends, and the dependencies are replaced during the packaging process. This is equivalent to the definition of alias in Seajs.config, when you copy it, note that the character's single quote is changed to double quotation marks.
Note: Both the key and the value of the JSON file are double quotes.
More parameters can be found in the SPM help build.
C:\ASSETS>SPM help Buildbuild CMD MODULEUSAGE:SPM build [options]options:--only only Execute cur Rent phrase plugin. --global-config use User custom CONFIG. --base Set base directory. [String] [Default: "C:\\assets"]--src set src directory. [string]--dist set dist directory. [string]--source set source server. --version Set module version. [string]--source-files set directory which need to compile. [Default:null]--throwerrorondepnotfound throw error when dependencies not found. [Boolean] [Default:false]--with-debug add debug file. [String] [Default: "Debug"]--timeout Set Request Service time delay [default:6000]--verbose,-V Show more verbose infOrmation. [Default:2]--encoding Set file encoding! [Default: "UTF8"]
We switch to a directory with Package.json to perform the SPM BUILD,SPM will read the Package.json file under that directory.
C:\assets\apps\hello>spm build
The build process will have not Found I18n!lang dependency! warning, regardless.
In fact, when the code is running, we will configure the preload plugin in Seajs.config, which will not have any effect.
After the build is finished, the corresponding code file is generated in sea-modules/apps/hello/1.0.0/, and the business JS file is merged into Main.js.
C:\assets\sea-modules>tree apps /f
You can view the output of the build by executing the above command.
C:\ASSETS\SEA-MODULES\APPS└─hello └─1.0.0 │ main.js //spinning.js 合并到main.js中。 │ main-debug.js //没有压缩的js文件,主要用于调试。 │ ├─i18n │ │ lang.js │ │ │ └─zh-cn │ lang.js │ └─tpl userinfo.tpl
Changes to the specific reference file can be viewed through the source window in the Chrome debugger to see the path to the referenced file.
Summary: Here are just a few examples of the use of the SPM tool, please refer to the relevant documentation for more information.
http://web322-szb.iteye.com/blog/1734863
Node. JS NPM installation SPM failed, which is a version issue