Skip to content
Mithril.js 2
Main Navigation 指南API

简体中文

English
繁體中文
Español
Français
Русский
Português – Brasil
Deutsch
日本語
한국어
Italiano
Polski
Türkçe
čeština
magyar

简体中文

English
繁體中文
Español
Français
Русский
Português – Brasil
Deutsch
日本語
한국어
Italiano
Polski
Türkçe
čeština
magyar

主题

Sidebar Navigation

入门

安装

简单应用

资源

JSX

在旧版浏览器上使用 ES6+

动画

测试

示例

第三方库集成

路径处理

关键概念

虚拟 DOM

组件

生命周期方法

键(Key)

自动重绘系统

杂项

框架对比

从 v1.x 迁移

从 v0.2.x 迁移

API

页面导航

在旧版浏览器上使用 ES6+ ​

Mithril.js 使用 ES5 编写,但完全兼容 ES6 及更高版本。所有现代浏览器都原生支持 ES6+,包括原生模块语法。(它们不支持 Node 的特殊模块解析,因此不能使用 import * as _ from "lodash-es" 或类似的语句,仅支持相对路径和 URL 路径。)因此,你可以自由地使用箭头函数作为闭包组件,以及类作为类组件。

但是,如果需要支持 Internet Explorer 等旧版浏览器,则需要将代码转译为 ES5。本页介绍如何使用 Babel 使现代 ES6+ 代码兼容旧版浏览器。

设置 ​

首先,确保已安装 Node。它自带 npm,我们将会用到它。

下载完成后,打开终端并运行以下命令:

bash
# 将此替换为你的项目的实际路径。如果路径包含空格,请用引号将其引起来;
# 如果你在 Linux/Mac 上,并且路径包含 `$$`,请用单引号将其引起来。
cd "/path/to/your/project"

# 如果你已经有一个 `package.json` 文件,请跳过此命令。
npm init

现在,你可以选择以下两种方式之一:

  • 使用 Babel 独立运行,不使用打包器
  • 使用 Babel 并使用 Webpack 打包

使用 Babel 独立运行 ​

首先,我们需要安装一些依赖项:

  • @babel/cli:安装核心 Babel 逻辑以及 babel 命令。
  • @babel/preset-env:帮助 Babel 确定要转译的代码以及如何转译。
bash
npm install @babel/cli @babel/preset-env --save-dev

现在,创建一个 .babelrc 文件并使用 @babel/preset-env 进行配置:

json
{
  "presets": ["@babel/preset-env"],
  "sourceMaps": true
}

最后,如果你对需要支持的浏览器有非常具体的要求,可能需要配置 Browserslist,以便 Babel(和其他库)知道需要支持哪些功能。

默认情况下,如果不进行任何配置,Browserslist 会使用一个相当合理的查询:> 0.5%, last 2 versions, Firefox ESR, not dead。除非你有特殊情况需要更改此设置,例如需要使用大量 polyfill 来支持 IE 8,否则无需进行此步骤。

每次要编译项目时,运行以下命令即可:

bash
babel src --out-dir dist

可以使用 npm 脚本来简化操作,避免重复输入命令。在 package.json 文件的 "scripts" 对象中添加一个 "build" 字段:

json
{
  "scripts": {
    "build": "babel src --out-dir dist"
  }
}

这样,运行命令就更容易记忆:

bash
npm run build

使用 Babel 和 Webpack ​

如果想使用 Webpack 进行打包,则需要更多步骤来设置。首先,我们需要安装 Babel 和 Webpack 所需的所有依赖项:

  • webpack:核心 Webpack 代码。
  • @babel/core:核心 Babel 代码,是 babel-loader 的同级依赖。
  • babel-loader:让 Webpack 知道如何使用 Babel 来转译你的文件。
  • @babel/preset-env:帮助 Babel 确定要转译的代码以及如何转译。
bash
npm install webpack webpack-cli @babel/core babel-loader @babel/preset-env --save-dev

现在,创建一个 .babelrc 文件并使用 @babel/preset-env 进行配置:

json
{
  "presets": ["@babel/preset-env"],
  "sourceMaps": true
}

接下来,如果你对需要支持的浏览器有非常具体的要求,可能需要配置 Browserslist,以便 Babel(和其他库)知道需要支持哪些功能。

默认情况下,如果不进行任何配置,Browserslist 会使用一个相当合理的查询:> 0.5%, last 2 versions, Firefox ESR, not dead。除非你有特殊情况需要更改此设置,例如需要使用大量 polyfill 来支持 IE 8,否则无需进行此步骤。

最后,创建一个名为 webpack.config.js 的文件来设置 Webpack:

javascript
const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /\/node_modules\//,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

此配置假定应用程序入口点的源代码文件位于 src/index.js 中,并将 bundle 输出到 dist/app.js。

现在,要运行打包器,只需运行以下命令:

bash
webpack -d --watch

可以使用 npm 脚本来简化操作,避免重复输入命令。在 package.json 文件的 "scripts" 对象中添加一个 "start" 字段:

json
{
  "scripts": {
    "start": "webpack -d --watch"
  }
}

这样,运行命令就更容易记忆:

bash
npm start

对于生产版本,你需要压缩你的脚本。幸运的是,这也很简单:只需使用不同的选项来运行 Webpack。

bash
webpack -p

你可能还想将此添加到你的 npm 脚本中,以便可以快速轻松地构建它。

json
{
  "scripts": {
    "start": "webpack -d --watch",
    "build": "webpack -p"
  }
}

这样,运行命令就更容易记忆:

bash
npm run build

当然,你也可以在自动化的生产构建脚本中添加此命令。例如,如果你使用 Heroku,它可能是这样的:

json
{
  "scripts": {
    "start": "webpack -d --watch",
    "build": "webpack -p",
    "heroku-postbuild": "webpack -p"
  }
}
Pager
上一页JSX
下一页动画

基于 MIT 许可证 发布。

版权所有 (c) 2024 Mithril Contributors

https://mithril.js.org/es6.html

基于 MIT 许可证 发布。

版权所有 (c) 2024 Mithril Contributors