nat快速上手
<h3>脚手架</h3>
<h3>安装</h3>
<h4>NPM</h4>
<p><code>npm install nat --save-dev</code></p>
<p>nat 搭配 webpack 2+ 支持后编译和普通编译 2 种构建方式（默认使用后编译），使用前都需要修改应用的依赖和配置。</p>
<h5>后编译(按需引入)</h5>
<ul>
<li>安装依赖</li>
</ul>
<pre><code> "devDependencies": {
"webpack-post-compile-plugin": "^1.0.0",
"webpack-transform-modules-plugin": "^0.4.3",
"babel-plugin-transform-imports": "^1.5.1",
"babel-plugin-transform-modules": "^0.1.1"
}
</code></pre>
<ul>
<li>增加.babelrc 文件配置</li>
</ul>
<pre><code>"plugins": [
[
"transform-modules",
{
"nat": {
"transform": "nat/src/packages/${member}",
"preventFullImport": true,
"kebabCase": true
}
}
]
]
</code></pre>
<ul>
<li>修改 package.json 配置
<pre><code>"compileDependencies": [
"nat"
] </code></pre></li>
<li>修改 webpack 配置</li>
</ul>
<pre><code>// webpack.base.conf.js
var TransformModulesPlugin = require('webpack-transform-modules-plugin');
var PostCompilePlugin = require('webpack-post-compile-plugin')
module.exports = {
// ...
plugins: [
// ...
new PostCompilePlugin(),
new TransformModulesPlugin()
]
// ...
}
</code></pre>
<h5>普通编译（按需引入）</h5>
<ul>
<li>安装依赖 </li>
</ul>
<pre><code> "devDependencies": {
"babel-plugin-component": "^1.1.1",
}
</code></pre>
<ul>
<li>修改 webpack 配置</li>
</ul>
<pre><code>// webpack.base.conf.js
module.exports = {
// ...
resolve: {
// ...
mainFields: ['main', 'module']
// ...
}
// ...
}
</code></pre>
<ul>
<li>修改 .babelrc文件配置</li>
</ul>
<pre><code>{
"plugins": [
//增加属性开始
[
"component",
{
"libraryName": "nat",
"style": false
}
]
//增加属性结束
],
}
</code></pre>
<h5>普通编译（全部引入）</h5>
<ul>
<li>修改 webpack 配置</li>
</ul>
<pre><code>// webpack.base.conf.js
module.exports = {
// ...
resolve: {
// ...
mainFields: ['main', 'module']
// ...
}
// ...
}
</code></pre>
<h5>nat使用常见QA</h5>
<ul>
<li>普通编译全部引入nat组件和后编译时配置下面配置时会报错</li>
</ul>
<pre><code>{
"plugins": [
//增加属性开始
[
"component",
{
"libraryName": "nat",
"style": false
}
]
//增加属性结束
],
}
</code></pre>
<ul>
<li>。。。。</li>
</ul>