- Notifications
You must be signed in to change notification settings - Fork4
shaozj/silk
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
react app 开发cli工具，包括脚手架以及开发调试功能，支持开发 react 多页面 app。
支持多种css预处理语言，包括 less sass/scss stylus.
View README in Englishview on github
$ sudo npm install silki -g
新建一个 react 应用
$ silk new$ silk new -r# or$ silk new --remote# 从远程（gitlab）拉取框架代码
新建一个页面
$ silk page<name>
新建一个独立 h5 组件
silk new mod
新建一个组件
$ silk cpnt<name>
编译代码（在内存中），并启动 react app 调试服务器
$ silk server
编译代码 (在内存中)，并启动 h5 组件 调试服务器
silk server -m
将代码编译并存储在文件中, 默认在 ./build 目录下
$ silk build
编译 h5 组件
silk buildMod
生成 vendor.dll.js 文件
$ silk dll显示帮助文档
$ silk -h
显示版本
$ silk --version
- 配置文件为.silkrc ，在项目的根目录下
- JSON 格式，支持注释
默认配置如下:
{"entry":"src/pages/**/index.js","disableCSSModules":false,"publicPath":"/","outputPath":"./build","useBabelrc":false,"extraBabelPlugins": [ ["import", [{"libraryName":"antd","style":true }]] ],"extraBabelPresets": [ ],"extraPostCSSPlugins": [],"autoprefixer":null,"proxy":null,"externals":null,"multipage":true,"define":null,"env":null,"theme":null,"port":8000,"dll":false,"dllEntry": [],"noVendor":false,"notClearBuild":false}entry 是一个页面的入口点。entry 选项对应了 webpack 配置文件中的entry。参见webpack entry。 不同之处是，.silkrc 中，支持 glob 格式的 ｀entry｀。
一个例子如下所示:
.silkrc
{ "entry": "src/pages/**/index.js",}禁用 css modules, 默认为 false. 参见css modules
设置生产环境下的 publicPath, 开发环境下默认为 '/' . 参见webpack output.publicPath
在本地开发环境强制设置 publicPath (不设置默认为 '/')，为了能在异步加载 js 的线上环境调试
设置 output 路径. 参见webpack output.path
是否使用本工程下的 .babelrc 文件，默认 false 不使用，如果开启使用，那么得在本工程下安装相应的 babel plugins 和 babel presets。
设置额外的 babel 插件。useBabelrc=false 时生效。只支持添加, 不支持替换和删除。下面是添加 babel-plugin-import 插件的例子:
.silkrc
{ "extraBabelPlugins": [ ["import", { "libraryName": "antd", "libraryDirectory": "lib", "style": "css" }] ]}设置额外的 babel presets。useBabelrc=false 时生效。只支持添加, 不支持替换和删除。
.silkrc
{ "extraBabelPresets": ['babel-preset-stage-2'] ]}设置额外的 postcss 插件. 目前还未支持.
设置 autoprefixer, 参见autoprefixer 和browserslist
例子:
.silkrc
{ "autoprefixer": { "browsers": [ "iOS >= 8", "Android >= 4" ] }}设置代理, 参见webpack dev server proxy
例子:
.silkrc
{ "proxy": [ { "context": ["/common/**", "/tair/**", "/video/**", "/system/**", "/*.do"], "target": "http://mytv-test.alibaba.net", "secure": false } ]}设置 webpack externals. 参见webpack externals
是否是多页面应用. 默认为 true.
对应 webpack 中的 DefinePlugin 配置. 值将自动做 JSON.stringify 处理. 参见webpack DefinePlugin
Example:
.silkrc
{ "define": { "PRODUCTION": true, "VERSION": "1.0.0", }}设置某个环境下的配置.development 为开发环境,production 为生产环境.
例子:
.silkrc
{ "extraBabelPlugins": ["transform-runtime"], "env": { "development": { "extraBabelPlugins": ["dva-hmr"] } }}配置后, 在开发环境下,extraBabelPlugins 为["transform-runtime", "dva-hmr"], 在生产环境下,extraBabelPlugins 为["transform-runtime"].
注意：如果配置项值为数组或对象，则最终得到配置为合并后的数组或对象，如果配置项的值为字符串等其他类型，则会被 env 中配置的值所替换。
设置 antd 主题。 支持对象和表示less文件路径的字符串。
例子:
.silkrc
{ "theme": { "@primary-color": "#1DA57A", "@link-color": "#1DA57A", "@border-radius-base": "2px", "@font-size-base": "16px", "@line-height-base": "1.2" }}// or{ "theme": "./theme-config.js"}设置开发服务器的端口.
是否开启webpack dll功能。默认为 false。如果开启了dll功能，需要先执行一遍 silk dll，生成 vender.dll.js（注意，该指令只需执行一遍）。同时，需要在 template-dev.html 中添加如下代码：<script src="/vendor.dll.js"></script> 。之后用 silk server 启动开发调试服务器。
要编译到 vendor.dll.js 中的代码，数组。成员为需要编译到 dll 中的库的路径。
例子：
{ "dllEntry": ["react", "react-dom", "antd", "whatwg-fetch"]}当 dllEntry 为空时，编译 dll 时，默认要编译库即为['react', 'react-dom', 'antd', 'whatwg-fetch']。
不提取 vendor.js，默认 false。在希望每个页面独立编译时，设置 true。
每次 build 时不清理 build 目录。默认 false，希望不清理时设为 true。
使用 babel 直接编译命令
"useBabelCmd": false修改以下文件，开发服务器会自动重启。
- .silkrc
- theme 配置指定的文件
新建一个页面时，开发服务器会自动重启。
##LICENSE