标签 JavaScript 下的文章

介绍一下,开发一个 Lib,使用 rollup 的配置流程

文章所有代码地址: https://github.com/JuZiSang/coding-test/tree/master/Web/Rollup

安装所需依赖

# 安装 rollup
yarn add rollup -D

# 安装 babel 所需依赖
yarn add @babel/core @babel/plugin-syntax-dynamic-import @babel/plugin-transform-runtime @babel/preset-env @babel/runtime @rollup/plugin-babel -D
yarn add core-js

# 安装 typescript 所需依赖
yarn add rollup-plugin-typescript2 typescript -D

# 安装样式相关依赖
yarn add rollup-plugin-postcss sass -D

# 安装编译 nodejs 模块所需依赖
yarn add @rollup/plugin-node-resolve @rollup/plugin-commonjs -D

打包配置

项目结构

├── src
│   ├── lib
│   │   └── index.ts
│   └── main.ts
├── .browserslistrc
├── babel.config.js
├── package.json
├── rollup.config.js
├── tsconfig.json
└── yarn.lock

rollup.config.js

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import typescript from 'rollup-plugin-typescript2'
import babel from '@rollup/plugin-babel'
import postcss from 'rollup-plugin-postcss'
import autoprefixer from 'autoprefixer'

export default {
  input: 'src/lib/index.ts',
  output: [
    { file: 'dist/lib.umd.js', name: 'Lib', format: 'umd' },
    { file: 'dist/lib.global.js', name: 'Lib', format: 'iife' },
    { file: 'dist/lib.esm.js', format: 'esm' }
  ],
  plugins: [
    // 可以 import node_modules 中的模块
    resolve(),
    // 将 commonjs 规范的模块,转换为 es6
    commonjs(),
    // typescript 转换,只有最基础的转换,将 ts > es6
    typescript(),
    // babel 编译 ts 转换出的 es6 模块
    babel({
      exclude: 'node_modules/**',
      babelHelpers: 'bundled',
      extensions: ['.js', '.ts']
    }),
    // 转换 scss
    postcss({
      extract: 'outline.css',
      extensions: ['scss', 'css'],
      minimize: true,
      plugins: [autoprefixer()]
    })
  ]
}

babel.config.js

module.exports = {
  presets: [
    ['@babel/preset-env', {
      'useBuiltIns': 'usage',
      'corejs': 3
    }]
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ],
} 

tsconfig.json

配置基本只用来引导 vscode 提示,不做其他转换

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": false,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "sourceMap": false,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}
  • .browserslistrc

    postcss 看的

> 1%
last 2 versions
not dead

开发环境

配置一个改动 js 及 style 能自动重载的环境

# nollup 在 rollup 上实现 重载 or 热重载
# cross-env 用来设置环境变量
yarn add nollup cross-env -D

项目结构

├── src
│   ├── lib
│   │   └── index.ts
│   └── main.ts
├── examples # 新增
│   └── index.html
├── .browserslistrc
├── .nolluprc.js # 新增
├── babel.config.js
├── package.json
├── rollup.config.js
├── tsconfig.json
└── yarn.lock

.nolluprc.js

module.exports = {
  port: 8080,
  hot: true,
  contentBase: 'examples'
}

package.json

  "scripts": {
    "start": "cross-env NODE_ENV=development nollup --config rollup.config.js",
    "build": "cross-env NODE_ENV=production rollup --config rollup.config.js"
  }

rollup.config.js

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import typescript from 'rollup-plugin-typescript2'
import babel from '@rollup/plugin-babel'
import postcss from 'rollup-plugin-postcss'
import autoprefixer from 'autoprefixer'
// 区分开发环境
const isDev = process.env.NODE_ENV === 'development'

export default {
  // 开发环境使用不同的入口
  input: isDev ? 'src/main.ts' : 'src/lib/index.ts',
  output: isDev
    ? [{ file: 'examples/main.js', sourcemap: true, format: 'iife' }]
    : [
      { file: 'dist/lib.umd.js', name: 'Lib', format: 'umd' },
      { file: 'dist/lib.global.js', name: 'Lib', format: 'iife' },
      { file: 'dist/lib.esm.js', format: 'esm' }
    ],
  plugins: [
    resolve(),
    commonjs(),
    typescript(),
    babel({
      exclude: 'node_modules/**',
      babelHelpers: 'bundled',
      extensions: ['.js', '.ts']
    }),
    postcss({
      extract: 'outline.css',
      extensions: ['scss', 'css'],
      minimize: true,
      plugins: [autoprefixer()]
    })
  ]
}

examples/index.html

注意引入 css js,名字就是配置中的 output 中的名字

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Examples</title>
  <link rel="stylesheet" type="text/css" href="./outline.css">
</head>

<body>
  <div id="app"></div>
  <script src="./main.js"></script>
</body>

</html>

最近学习 Html,需要调用传递数据到 IOS 和 Android,写博客记录下~

一、判断设备是 Android 还是 IOS

var browser = {
  versions: (function() {
    var a = navigator.userAgent,
      b = navigator.appVersion;
    return {
      trident: a.indexOf("Trident") > -1,
      presto: a.indexOf("Presto") > -1,
      webKit: a.indexOf("AppleWebKit") > -1,
      gecko: a.indexOf("Gecko") > -1 && a.indexOf("KHTML") == -1,
      mobile: !!a.match(/AppleWebKit.*Mobile.*/),
      ios: !!a.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
      android: a.indexOf("Android") > -1 || a.indexOf("Linux") > -1,
      iPhone: a.indexOf("iPhone") > -1,
      iPad: a.indexOf("iPad") > -1,
      webApp: a.indexOf("Safari") == -1
    };
  })(),
  language: (navigator.browserLanguage || navigator.language).toLowerCase()
};

用法:

if (browser.versions.android) {
  //Android
} else if (browser.versions.ios) {
  //ios
}

二、调用 Android 的代码

Android 这边相对 IOS 要简单很多,叫 Android 提供一个类名,方法名直接调用即可

//这里的Android全部都是Android程序猿给你里,叫他提供这两个调用就可以了
//data为传递过去的数据
Android.Android(data);

三、调用 IOS 的代码

function GoIos(data) {
    var iframe = document.createElement("iframe");
    var url = "myapp:";
    url = url + "&data=" + data;
    iframe.src = url;
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
    iframe.parentNode.removeChild(iframe);
    iframe = null;
}

data 为 String 数据,传递过去,IOS 就会触发相应回调了

四、应用

//照上面的写法,代码应该如下
function GoToApp(data){
//只能传递字符串,如果是JSON,转成字符串
data = JSON.stringify(data);
if (browser.versions.android) {
        //Android
        Android.Android(data);
    } else if (browser.versions.ios) {
        //ios
        GoIos(data);
    }
}

参考:
js(javascript)与 ios(Objective-C)相互通信交互