2.5 json文件引用
前言
在日常开发中,可能需要用 import
方式引用*.json
文件,但是rollup.js
编译原生ES6的 import
引用默认只会解析 *.js
。 这里要在rollup.js
编译的源码中使用*.json
文件,官方提供了一个插件模块 @rollup/plugin-json
实现例子
- 编译json文件引用
demo例子
https://github.com/chenshenhai/rollupjs-note/blob/master/demo/chapter-02-05/
npm i
## 开发模式
npm run dev
## 生产模式
npm run build
实现步骤
步骤1: 目录和准备
.
├── build
│ ├── rollup.config.dev.js
│ ├── rollup.config.js
│ └── rollup.config.prod.js
├── dist
│ ├── index.js
│ └── index.js.map
├── example
│ └── index.html
├── package.json
└── src
└── index.js
安装对应编译的npm模块
## 安装 rollup.js 基础模块
npm i --save-dev rollup
## 安装 json 引用解析插件
npm i --save-dev @rollup/plugin-json
## 安装 rollup.js 编译本地开发服务插件
npm i --save-dev rollup-plugin-serve
## 安装 rollup.js 编译代码混淆插件
npm i --save-dev rollup-plugin-uglify
## 安装 rollup.js 编译ES6+的 babel 模块
npm i --save-dev @rollup/plugin-babel @babel/core @babel/preset-env
## 安装 json 引用插件
npm i --save-dev @rollup/plugin-json
步骤2: rollup配置
- 编译基本配置
./build/rollup.config.js
const path = require('path');
const { babel } = require('@rollup/plugin-babel');
const json = require('@rollup/plugin-json');
const resolveFile = function(filePath) {
return path.join(__dirname, '..', filePath)
}
const babelOptions = {
"presets": ['@babel/preset-env'],
}
module.exports = [
{
input: resolveFile('src/index.js'),
output: {
file: resolveFile('dist/index.js'),
format: 'umd',
},
plugins: [
json(),
babel(babelOptions),
],
},
]
开发模式
配置基本./build/rollup.config.dev.js
const path = require('path');
const serve = require('rollup-plugin-serve');
const configList = require('./rollup.config');
const resolveFile = function(filePath) {
return path.join(__dirname, '..', filePath)
}
const PORT = 3000;
const devSite = `http://127.0.0.1:${PORT}`;
const devPath = path.join('example', 'index.html');
const devUrl = `${devSite}/${devPath}`;
setTimeout(()=>{
console.log(`[dev]: ${devUrl}`)
}, 1000);
configList.map((config, index) => {
config.output.sourcemap = true;
if( index === 0 ) {
config.plugins = [
...config.plugins,
...[
serve({
port: PORT,
contentBase: [resolveFile('')]
})
]
]
}
return config;
})
module.exports = configList;
生产模式
配置基本./build/rollup.config.prod.js
const { uglify } = require('rollup-plugin-uglify');
const configList = require('./rollup.config');
const resolveFile = function(filePath) {
return path.join(__dirname, '..', filePath)
}
configList.map((config, index) => {
config.output.sourcemap = false;
config.plugins = [
...config.plugins,
...[
uglify()
]
]
return config;
})
module.exports = configList;
- 在
./package.json
配置编译执行脚本{ "scripts": { "build": "node_modules/.bin/rollup -c ./build/rollup.config.prod.js", "dev": "node_modules/.bin/rollup -w -c ./build/rollup.config.dev.js" }, }
步骤3: 待编译ES6源码
- 源码路径
./src/index.js
- 源码内容
import pkg from './../package.json';
const dom = document.getElementById('J_Code');
const pkgText = JSON.stringify(pkg);
const showCode = `<code>${pkgText}</code>`;
dom.innerHTML = showCode;
步骤4: 编译结果
- 在项目目录下执行
开发模式
npm run dev
- 编译结果在目录
./dist/
下
步骤5: 浏览器查看结果
- example目录
./example/index.html
- example源码
<html>
<head>
<script src="https://cdn.bootcss.com/babel-polyfill/6.26.0/polyfill.js"></script>
</head>
<body>
<p>hello world</p>
<div id="J_Code"></div>
</body>
<script src="./../dist/index.js"></script>
</html>