1、首先右键解压准备好的(PS插件)压缩包，解压成文件后，需要点击右键全部复制文件。
2、右键点击桌面的PS软件，找到“打开文件位置”的设置。
3、找到PS插件文件夹Plug-Ins，选择打开文件。
4、把复制的(PS插件)黏贴到文件夹里。
5、然后打开PS软件，在菜单栏里选择滤镜，找到Portraiture(PS插件)点击进入。
6、把磨皮插件的许可证黏贴进去就可以使用了。
1.2.1 全局依赖
1.2.2 dependencies
1.2.3 devDependencies
2.2.1 ./.babelrc
2.2.2 ./tsconfig.json
2.2.3 ./webpack.config.js
2.3.1 ./src/index.tsx
注：
（1）在引用 .tsx 文件的时候，不需要后缀名。而引用 .jsx 文件的时候， 要加上后缀名 。
（2）在 .tsx 中导入 React 需要使用 import * as React from ... ，不能使用 import React from ... ，
为 compilerOptions 增加 allowSyntheticDefaultImports 选项为 true 可以解决这个问题，
但是vs code还是会标红（ 重启vs code可解决 ）。
（3） .jsx 能识别 .jsx 和 .tsx 的默认导出，
.tsx 能识别 .tsx 的默认导出，但是 不能识别 .jsx 的默认导出。
2.3.2 ./src/components/tsx-comp/index.tsx
2.3.3 ./src/components/jsx-comp/...
（1）./src/components/jsx-comp/index.jsx
（2）./src/components/jsx-comp/index.d.ts
注：
为了能让TypeScript识别导入JavaScript模块中变量的类型，还要为模块添加 .d.ts 文件。
2.3.4 ./index.html
React &Webpack
export = and import = require()
import fails with 'no default export'
Compiler Options
配置 React 项目，需要完成的工作：
1、编译 jsx,es6,scss 等资源
2、自动引入静态资源到 html 页面
3、实时编译和刷新浏览器
4、按指定模块化规范自动包装模块
5、自动给 css 添加浏览器内核前缀
6、按需打包合并 js、css
根据 webpack 文档编写最基本的 webpack 配置，直接使用 node api 的方式
/* webpack.config.js */
var webpack= require( 'webpack' )
// 辅助函数 var utils= require( './utils' )
var fullPath=utils.fullPath
var pickFiles=utils.pickFiles
// 项目根路径 var ROOT_PATH=fullPath( '../' )
// 项目源码路径 var SRC_PATH=ROOT_PATH+ '/src'
// 产出路径 var DIST_PATH=ROOT_PATH+ '/dist'
// 是否是开发环境 var __DEV__= process.env. NODE_ENV !== 'production'
// conf
var alias=pickFiles({
id :/(conf\/[^\/]+).js$/,
pattern :SRC_PATH+ '/conf/*.js'
})
// components
alias= Object.assign(alias,pickFiles({
id :/(components\/[^\/]+)/,
pattern :SRC_PATH+ '/components/*/index.js'
}))
// reducers
alias= Object.assign(alias,pickFiles({
id :/(reducers\/[^\/]+).js/,
pattern :SRC_PATH+ '/js/reducers/*'
}))
// actions
alias= Object.assign(alias,pickFiles({
id :/(actions\/[^\/]+).js/,
pattern :SRC_PATH+ '/js/actions/*'
}))
var config= {
context :SRC_PATH,
entry : {
app : [ './pages/app.js' ]
},
output : {
path :DIST_PATH,
filename : 'js/bundle.js'
},
module : {},
resolve : {
alias :alias
},
plugins : [
new webpack.DefinePlugin({
// http://stackoverflow.com/questions/30030031/passing-environment-dependent-variables-in-webpack
"process.env.NODE_ENV" : JSON .stringify(process.env. NODE_ENV || 'development' )
})
]
}
module.
exports =config
/* webpack.dev.js */
var webpack= require( 'webpack' )
var WebpackDevServer= require( 'webpack-dev-server' )
var config= require( './webpack.config' )
var utils= require( './utils' )
var PORT=8080
var HOST=utils.getIP()
var args= process.argv
var hot=args.indexOf( '--hot' ) >-1
var deploy=args.indexOf( '--deploy' ) >-1
// 本地环境静态资源路径 var localPublicPath= 'http://' +HOST+ ':' +PORT+ '/'
config.output. publicPath =localPublicPath
config.entry.app.unshift( 'webpack-dev-server/client?' +localPublicPath)
new WebpackDevServer(webpack(config), {
hot :hot,
inline : true ,
compress : true ,
stats : {
chunks : false ,
children : false ,
colors : true
},
// Set this as true if you want to access dev server from arbitrary url.
// This is handy if you are using a html5 router.
historyApiFallback : true ,
}).listen(
PORT,HOST, function () {
console .log(localPublicPath)
})
编译 jsx、es6、scss 等资源：
● 使用 bael 和 babel-loader 编译 jsx、es6
● 安装插件: babel-preset-es2015 用于解析 es6
● 安装插件：babel-preset-react 用于解析 jsx
// 首先需要安装 babel
$ npm i babel-core
// 安装插件
$ npm i babel-preset-es2015babel-preset-react
// 安装 loader
$ npm i babel-loader
在项目根目录创建 .babelrc 文件:
{
"presets" : [ "es2015" , "react" ]
}
在 webpack.config.js 里添加：
// 使用缓存 var CACHE_PATH = ROOT_PATH + '/cache'
// loaders
config.module. loaders = []
// 使用 babel 编译 jsx 、 es6
config.module. loaders .push({
test :/\.js$/,
exclude :/node_modules/,
include : SRC_PATH,
// 这里使用 loaders ，因为后面还需要添加 loader
loaders : [ 'babel?cacheDirectory=' + CACHE_PATH ]
})
接下来使用 sass-loader 编译 sass:
$ npm i sass-loader node-sasscss-loader style-loader
●css-loader 用于将 css 当做模块一样来 import
●style-loader 用于自动将 css 添加到页面
在 webpack.config.js 里添加：
// 编译 sass
config.module. loaders .push({
test :/\.(scss|css)$/,
loaders : [ 'style' , 'css' , 'sass' ]
})
自动引入静态资源到相应 html 页面
● 使用 html-webpack-plugin
$ npm i html-webpack-plugin
在 webpack.config.js 里添加：
// html 页面 var HtmlwebpackPlugin= require( 'html-webpack-plugin' )
config.
plugins .push(
new HtmlwebpackPlugin({
filename : 'index.html' ,
chunks : [ 'app' ],
template : SRC_PATH + '/pages/app.html'
})
)
打包合并 js、css
webpack 默认将所有模块都打包成一个 bundle，并提供了 Code Splitting 功能便于我们按需拆分。在这个例子里我们把框架和库都拆分出来：
在 webpack.config.js 添加：
config.entry. lib = [
'react' , 'react-dom' , 'react-router' ,
'redux' , 'react-redux' , 'redux-thunk'
]
config.output. filename = 'js/[name].js'
config.
plugins .push(
new webpack.optimize.CommonsChunkPlugin( 'lib' , 'js/lib.js' )
)
// 别忘了将 lib 添加到 html 页面
// chunks: ['app', 'lib']
