We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
jspm is on top of babel and systemjs.
babel
systemjs
阅读: https://www.zfanw.com/blog/tag/jspm
官方文档: http://jspm.io/docs/getting-started.html
这里我写了个demo https://github.com/uniquejava/jspm-demo REAMD.md中详细的步骤...
以下是些最基本的.
下载的包放在jspm_packages中, 配置文件为config.js
安装包
jspm install jquery 会自动在config.js中加上map "jquery": "npm:[email protected]", 或者 jspm install github:components/jquery 对应的map为 "components/jquery": "github:components/[email protected]", 或者手动给定别名 jspm install jquery=github:components/jquery 对应的map为 "jquery": "github:components/[email protected]",
根据别名移除包 jspm uninstall jquery 或 jspm unstall components/jquery 此命令1)从package.json中移除jspm下对应的dependencies, 2)从config.js中移除对应的map, 3)从jspm_packages目录下移除对应的文件.
jspm uninstall jquery 或 jspm unstall components/jquery
1)
2)
3)
所有已注册的包(能直接通过别名安装的): https://github.com/jspm/registry/blob/master/registry.json
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="jspm_packages/system.js"></script> <script src="config.js"></script> <script> System.import('app/main').then(function (app) { app.init(); }); </script> </body> </html>
app/main.js
'use strict'; import {sayHello} from './hello'; export function init() { sayHello(); }
app/hello.js
'use strict'; import $ from 'jquery'; export function sayHello() { $('body').text('sayHello'); }
npm install -g jspm-server 然后在项目根目录下执行jspm-server, 会自动打开浏览器到http://127.0.0.1:8080/ 并开启livereload.
npm install -g jspm-server
jspm-server
http://127.0.0.1:8080/
以上System.import有个问题, 就是每个js文件都会发一次http请求,如果js文件很多, 就会产生大量的http请求.这时可以打包
jspm bundle app/main --minify --no-mangle --inject --skip-source-maps
app/main是程序的入口.bundle会从这个文件开始将所有依赖的import全部打包到build.js中
后面的minify和no-mangle好理解和uglifyjs一样.(压缩, + 不混淆代码)
inject是在bundle的过程中自动在config.js中加入如下这段
bundles: { "build.js": [ "app/main.js", "app/hello.js", "npm:[email protected]", "npm:[email protected]/underscore.js", "npm:[email protected]", "npm:[email protected]/dist/jquery.js" ] },
这样可以在index.html少写下面这行 <script src="build.js"></script> 也可以在jspm bundle 命令中指定生成的文件名, 默认为build.js
<script src="build.js"></script>
最终的index.html如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jspm_packages/system.js"></script> <script src="config.js"></script> <script> System.import('app/main'); </script> </head> <body> </body> </html>
这样总共只会发送3次对js文件的请求..system.js, config.js以及build.js
执行jspm bundle-sfx app/main --minify --no-mangle --skip-source-maps
jspm bundle-sfx app/main --minify --no-mangle --skip-source-maps
这样index.html可以精简成如下形式:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="build.js"></script> </body> </html>
以上的打包命令我写到了package.json中, 执行npm run all-in-one即可. 见: https://github.com/uniquejava/jspm-demo
The text was updated successfully, but these errors were encountered:
No branches or pull requests
jspm is on top of
babelandsystemjs.阅读:
https://www.zfanw.com/blog/tag/jspm
官方文档:
http://jspm.io/docs/getting-started.html
这里我写了个demo
https://github.com/uniquejava/jspm-demo
REAMD.md中详细的步骤...
以下是些最基本的.
安装
下载的包放在jspm_packages中, 配置文件为config.js
安装包
根据别名移除包
jspm uninstall jquery 或 jspm unstall components/jquery此命令
1)从package.json中移除jspm下对应的dependencies,2)从config.js中移除对应的map,3)从jspm_packages目录下移除对应的文件.所有已注册的包(能直接通过别名安装的):
https://github.com/jspm/registry/blob/master/registry.json
实例
index.html
app/main.js
app/hello.js
运行
npm install -g jspm-server然后在项目根目录下执行
jspm-server, 会自动打开浏览器到http://127.0.0.1:8080/并开启livereload.打包
以上System.import有个问题, 就是每个js文件都会发一次http请求,如果js文件很多, 就会产生大量的http请求.这时可以打包
app/main是程序的入口.bundle会从这个文件开始将所有依赖的import全部打包到build.js中
后面的minify和no-mangle好理解和uglifyjs一样.(压缩, + 不混淆代码)
inject是在bundle的过程中自动在config.js中加入如下这段
这样可以在index.html少写下面这行
<script src="build.js"></script>也可以在jspm bundle 命令中指定生成的文件名, 默认为build.js
最终的index.html如下:
这样总共只会发送3次对js文件的请求..system.js, config.js以及build.js
更绝: 打包成一个自执行的js文件.
执行
jspm bundle-sfx app/main --minify --no-mangle --skip-source-maps这样index.html可以精简成如下形式:
以上的打包命令我写到了package.json中, 执行npm run all-in-one即可. 见: https://github.com/uniquejava/jspm-demo
The text was updated successfully, but these errors were encountered: