Build Tool Plugin ​

When using the build tool plugin, Alins will compile files named with jsx and tsx suffixes by default. Alins currently supports the following mainstream build tools

The following tool names are all npm package names, and the installation methods are as follows:

npm i <package_name>

1. vite-plugin-alins ​

// vite.config.js
import { defineConfig } from 'vite'
import alins from 'vite-plugin-alins'

export default defineConfig({
   plugins: [alins()],
})

2. rollup-plugin-alins ​

// rollup.config.js
import alins from 'rollup-plugin-alins'
 
export default {
   plugins: [
     alins()
   ]
}

3. esbuild-plugin-alins ​

import { build } from 'esbuild'
import alins from 'esbuild-plugin-alins'

build({
   plugins: [alins()],
});

4. alins-loader ​

module.exports = {
     module: {
         rules: [{
             test: /\.[jt]sx$/,
             use: [
                 {loader: 'alins-loader'},
             ]
         }]
     }
};

You can also customize your own development tools based on the following tools ​

5. alins-compiler-node ​

alins-compiler-node is the alins compiler in the nodejs environment. All the above plug-ins encapsulate the compilation functions implemented by this tool. They are used as follows:

const {parseAlins} = require('alins-compiler-node');
const code = 'let a=1; a++;';
const result = parseAlins(code);

The parseAlins method is an optional configuration item with three optional attributes:

1. ts: Whether to support typescript compilation, the default is false
2. importType: the way to introduce alins, optional values ​​are esm, cjs, iife. The default value is esm, which means using the import statement to introduce alins
3. filename: current code module file name, automatically generated by default

const {parseAlins} = require('alins-compiler-node');
const code = 'let a=1; a++;';
const result = parseAlins(code, {
     ts: false,
     importType: 'esm',
     filename: 'test.tsx',
});

6. alins-compiler-core ​

Compiler core module, basically developers do not need to use this module.

This module can generate a universal babel plug-in that supports use in web and nodejs environments. The alins-compiler-node above and the web compiler in subsequent chapters all rely on this module.

import {createBabelPluginAlins} from 'alins-compiler-core';
const babelPlugin = createBabelPluginAlins();

7. babel-preset-alins ​

Alins babel default comes with jsx and typescript translation functions. After installation, use it in babel.config.json or babel.config.js:

{
   "presets": [ "alins" ]
}

Supports importType, ts, and jsx parameters. The importType and ts parameters have the same meaning as in 5; the jsx parameter indicates whether to enable jsx translation, and the default is true.

{
   "presets": [
     ["alins", {
       "importType": "esm",
       "ts": false,
       "jsx": true
     }]
   ]
}

8. babel-plugin-alins ​

Alins babel plug-in does not include jsx and typescript translation functions. You need to install the corresponding plug-in yourself. It is recommended to use babel-preset-alins directly.

After installation, use in babel.config.json or babel.config.js:

{
   "plugins": [ "alins" ]
}

Supports carrying importType parameter, which has the same meaning as in 5. The default value is esm

{
   "plugins": [
     ["alins", {
       "importType": "esm"
     }]
   ]
}

9. eslint-config-alins ​

Alins eslint config module, after installation, configure it in the .eslintrc file:

{
   "extends": "alins"
}